Layout in two directions
Flexbox handles a row *or* a column. CSS Grid handles both at once: photo galleries, dashboards, whole page layouts. You draw the grid; items fall into its cells.
Columns, rows and fr
- grid-template-columns: 200px 1fr — a 200px column, then the rest.
- fr = a fraction of the free space: 1fr 2fr splits it one-third / two-thirds.
- repeat(4, 1fr) — four equal columns.
- gap works in grids too.
- grid-column: span 2 / grid-row: span 2 — make an item bigger.