Lesson 6

CSS Modern Layout Techniques: Exploring Flexbox and Grid

Introduction - CSS Layout Techniques

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.

Diving into Flexbox

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:

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

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

CSS
1.container { 2 display: flex; 3 flex-direction: row; /* the default arrangement is horizontal */ 4}

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

Journey through Justify-content

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:

CSS
1.container { 2 display: flex; 3 justify-content: space-between; /* this changes the distribution of items */ 4}
Understanding CSS Grid

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:

CSS
1.grid-container { 2 display: grid; 3 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 */ 4 grid-template-rows: 100px 300px; /* this creates two rows with differing heights. */ 5}

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:

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

Lastly, let's get to understand align-items, a property that is used in both Flexbox and Grid to define the cross-axis alignment.

CSS
1.container { 2 display: flex; 3 align-items: center; /* this centers flex items vertically within the container */ 4}
Wrap Up

Great job! Today's journey through CSS layout techniques has covered the basics of Flexbox and CSS Grid. These techniques are invaluable for modern, responsive designs. Up next are some practice exercises. Do remember, practicing these skills regularly is key to becoming a proficient web designer. Happy coding!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.