Basics · Layout

Grid

When you want columns that line up rather than a single flowing row, reach for display: grid. You define the tracks and the items flow into them.

grid-template-columns lists the column sizes. Track units are fr (a fraction of the free space), % of the axis, plain cells, and auto. repeat(3, 1fr) is shorthand for three equal columns. gap puts cells between tracks, and items that aren’t explicitly sized stretch to fill their cell. Unplaced items auto-flow row by row.

The footer below is three spans in a plain block, so they stack. A grid puts them in three even columns.

Your turn

Lay the footer out as three equal columns:

.footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1;
}

Press Run — the three items sit in aligned columns across the width.