CSS Advanced Layout

Flexbox is a powerful CSS layout module that provides a flexible way to distribute and align content within a container. It allows you to create one-dimensional layouts, either horizontally or vertically, by defining flexible boxes and their alignment properties.

Edit Copy Hide

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 200px;
  height: 200px;
  background-color: lightblue;
  margin: 10px;
}

Edit Copy Hide

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

This example demonstrates a responsive layout using flexbox. The .container div is set to display: flex to create a flex container. The flex-wrap: wrap property allows the items to wrap to the next line when the container becomes narrower. Each .item div represents a flexible item within the container. The flex: 1 0 200px property allows the items to grow and shrink as needed, with a minimum width of 200px. The items have a height of 200px, a light blue background color, and a 10px margin.

CSS Grid Layout is a two-dimensional grid system that enables you to create complex, grid-based layouts. It allows you to define both rows and columns, and position items within the grid using various alignment and positioning properties.

Edit Copy Hide

display: grid; /* Use the grid display style */
grid-template-columns: repeat(3, 1fr); /* Create 3 equal columns */
grid-gap: 10px; /* Set the gap between grid items */

height: 200px; /* Set the height of items to 200 pixels */
background-color: lightblue; /* Set the background color to light blue */

Edit Copy Hide

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

This example showcases a CSS grid layout. The .container div is set to display: grid to create a grid container. The grid-template-columns property defines three equal columns using repeat(3, 1fr), which means each column will take an equal fraction of available space. The grid-gap property adds a 10px gap between the grid items. Each .item div represents a grid item within the container. The items have a height of 200px and a light blue background color.

CSS variables (also known as custom properties) allow you to define reusable values that can be used throughout your CSS code. This feature is particularly useful for defining layout-related values, such as widths, heights, colors, or spacing, and easily updating them in a single place.

Edit Copy Hide

/* Define a custom CSS variable for the box color */
:root {
  --box-color: #ff0000; /* Set the custom variable to red */
}

.container {
  height: 200px; /* Set the container's height to 200 pixels */
}

.box {
  width: 100px; /* Set the box's width to 100 pixels */
  height: 100px; /* Set the box's height to 100 pixels */
  background-color: var(--box-color); /* Use the custom variable for background color */
}

Edit Copy Hide

<div class="container">
  <div class="box"></div>
</div>

This example demonstrates the usage of CSS variables. The :root selector is used to define a CSS variable named --box-color with a value of #ff0000 (red). The variable is then utilized in the background-color property of the .box class. Changing the value of the --box-color variable in one place will automatically update the background color of the box.

The CSS multi-column layout module allows you to create newspaper-like column layouts for your content. It provides properties to define the number of columns, the gap between them, and how the content should flow within the columns.

Edit Copy Hide

.container {
  columns: 2; /* Divide content into 2 columns */
  column-gap: 20px; /* Set the gap between columns to 20 pixels */
}

Edit Copy Hide

<div class="container">
  <p>Example 1 : Text ...</p>
  <p>Example 2 : Text ...</p>
  <p>Example 3 : Text ...</p>
</div>

In this example, the .container div is set to have two columns using the columns property. The column-gap property adds a 20px gap between the columns. The paragraphs within the container will automatically flow into the columns, creating a newspaper-like column layout.

Media queries enable you to apply different CSS rules based on the characteristics of the device or viewport. By using media queries, you can create responsive layouts that adapt and reflow based on the screen size, allowing your content to be displayed optimally across different devices.

Edit Copy Hide

.container {
  text-align: center; /* Center-align the text within the container */
}
p {
  font-size: 24px; /* Set the font size of paragraphs to 24 pixels */
}
@media (min-width: 768px) {
  p {
    font-size: 32px; /* For screens with a minimum width of 768px, increase font size to 32 pixels */
  }
}

Edit Copy Hide

<div class="container">
  <p>Responsive Heading</p>
</div>

This example demonstrates the use of media queries to create a responsive layout. By default, the h1 element has a font size of 24px. However, when the viewport width reaches 768px or larger, the media query inside @media is triggered, and the font size of the h1 element is changed to 32px. This allows the heading to adjust its size based on the screen size.

CSS grid frameworks, such as Bootstrap or Foundation, provide pre-defined CSS classes and structures that simplify the creation of complex layouts. These frameworks often include responsive grid systems, UI components, and utility classes to speed up the development process.

Edit Copy Hide

.container {
  display: grid; /* Use grid layout for the container */
  grid-template-columns: 1fr 1fr 1fr; /* Create three equal-width columns */
  grid-gap: 10px; /* Set the gap between grid items to 10 pixels */
}
.row {
  display: flex; /* Use flexbox for rows within the container */
}
.col {
  background-color: lightblue; /* Set the background color of columns to light blue */
  padding: 10px; /* Apply 10 pixels of padding to columns */
}

Edit Copy Hide

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

This example showcases the usage of a CSS grid framework. The .container div is set to a grid container with three equally sized columns. The grid-gap property adds a 10px gap between the grid cells. Inside the container, there is a .row div, which acts as a flex container. The .col divs represent the columns within the grid layout. They have a light blue background color and 10px padding.

CSS transitions and animations allow you to add dynamic effects to your layouts. By applying CSS properties and keyframes, you can create smooth transitions between different states or animate elements to bring interactivity to your designs.

Edit Copy Hide

.box {
  width: 100px; /* Set the width of the box to 100 pixels */
  height: 100px; /* Set the height of the box to 100 pixels */
  background-color: red; /* Set the background color to red */
  transition: background-color 1s; /* Apply a 1-second transition to background-color */
}
.box:hover {
  background-color: blue; /* Change background color to blue on hover */
}

Edit Copy Hide

    <div class="box"></div>

In this example, the .box div represents a box element. By default, it has a red background color. However, when the box is hovered over, the background-color property transitions smoothly over a 1-second duration, changing the background color to blue. This creates a subtle animation effect on the box.