Chapter 10 — CSS Grid

Define rows and columns together, place items deliberately, build responsive track patterns, and distinguish item alignment from content alignment.

New concepts

display: grid, grid-template-columns, grid-template-rows, grid-column, grid-row, grid-template-areas, grid-area, repeat(), minmax(), auto-fit, auto-fill, justify-items, align-items, justify-content, and align-content.

Read the CSS Grid gauge

Grid after Flexbox and positioning

Flexbox arranges content primarily along one axis. Grid defines rows and columns together. Unlike positioned layout, Grid keeps items participating in a shared layout system rather than removing them from normal flow.

Lessons

  1. 1. Grid tracks and gaps
  2. 2. Line placement and spans
  3. 3. Named template areas
  4. 4. repeat() and minmax()
  5. 5. auto-fit and auto-fill
  6. 6. Item alignment inside cells
  7. 7. Track collection alignment
  8. 8. Full-bleed breakout

Checkpoint

Create a responsive page with named header, sidebar, content, and footer areas. Use repeat(), minmax(), and auto-fit for one repeated section, then explain whether each alignment decision moves items inside cells or the full track collection.