Summary

In this lesson, we learned that:

• CSS Grid lays out elements in rows and columns at the same time. The element with display: grid is the grid container, and its direct children are the grid items.
• The columns are set with grid-template-columns: each value creates one column, for example 200px 1fr. Rows are created automatically as needed (or set with grid-template-rows).
• The fr unit is one share of the free space: 1fr 1fr 1fr creates three equal columns that adapt to the width of the container.
• repeat(3, 1fr) is a shorter way to write 1fr 1fr 1fr.
• gap sets the space between the rows and the columns (only between the cells, not at the edges of the grid). With two values, the first one is for the rows and the second one for the columns; row-gap and column-gap set them separately.
• Grid lines are numbered from 1. The grid-column and grid-row properties say which columns and rows an item takes up: span 2 takes up two of them, 1 / 3 everything between lines 1 and 3, and 1 / -1 all of them.
• grid-template-areas draws a layout from named areas, one string for each row, and grid-area puts an element into an area.
• Flexbox is for one direction (a row or a column), grid for two (rows and columns). They are often combined: grid for the layout of the page, flexbox for the parts inside it.

In the next lesson, the final project awaits you: you'll style a whole page on your own and use everything you've learned in the CSS course.