CSS Modern Layout Techniques: Exploring Flexbox and Grid

Welcome to our lesson on CSS Layout Techniques. We'll delve into the capabilities of Flexbox and Grid, techniques that are crucial to shaping modern, responsive web designs. Initially, we'll explore Flexbox, which is ideal for row or column layouts. After that, we'll focus on CSS Grid, renowned for its proficiency in two-dimensional layouts. Our primary goal? To facilitate the creation of beautiful, responsive Flexbox and Grid layouts with ease.

CSS Flexible Box Layout, often shortened to Flexbox, simplifies the process of layout design. It provides control over how items align, both horizontally and vertically, and specifies how they grow, shrink, and distribute space. Let's examine a flex container:

.container {
  display: flex; /* this turns the container into a flexbox layout */
}

In this context, the flex-direction property is used to switch between row and column layouts:

.container {
  display: flex;
  flex-direction: row; /* the default arrangement is horizontal */
}

Substituting row with column results in vertical arrangement of items, a feature particularly useful in responsive web design scenarios.

The justify-content property plays a crucial role in aligning items along the main axis. We will look into three of its options:

1. space-between: Aligns items evenly with the same amount of space in-between.
2. space-around: Distributes items evenly with half-size spaces at either end.
3. space-evenly: Distributes items evenly with the same amount of space surrounding each of them.

Here's an example:

.container {
  display: flex;
  justify-content: space-between; /* this changes the distribution of items */
}

CSS Grid excels when dealing with complex, two-dimensional layouts. The properties grid-template-columns and grid-template-rows define the column widths and row heights, respectively:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* this creates three columns, with the center one being twice as large as the other two – since the sum is four fractions, this means that the distribution will be 1/4, 2/4, 1/4 */
  grid-template-rows: 100px 300px; /* this creates two rows with differing heights. */
}

In the three-column grid created by grid-template-columns: 1fr 2fr 1fr, 1fr stands for a fraction of the total available space.

You can specify the size of columns and rows using percentages, as shown here:

.grid-container {
  display: grid;
  grid-template-columns: 30% 70%; /* With this, the 1st column will take 30% of the total width, and the 2nd column the 70% */
}