Grid Areas and Placement

Place items precisely using grid lines and named areas.

Grid Line Numbers

Items can span multiple cells using line numbers:

grid-column and grid-row

The span Keyword

Use span instead of line numbers:

Named Grid Areas

Create layouts with named areas:

Empty Cells with Dots

Use . for empty cells:

Interactive Playground

Practical: Blog Layout

Exercise: Span Columns

Make the header span all 3 columns: