Tracks, Lines, and the fr Unit

What this is. Grid lays content out in rows and columns simultaneously. Flexbox handles one axis and lets the other fall where it may. Grid controls both, which is what a page layout actually needs.

You define the shape on the container with grid-template-columns and grid-template-rows, and children fill the cells in order.

The fr unit. 1fr means one fraction of the leftover space. It exists because percentages break the moment you add a gap: three columns at 33.33% plus two gaps overflows the container. repeat(3, 1fr) divides whatever is left after the gaps, so it always fits.

✦ When to use which

If you are arranging things in one direction, a row of buttons or a stack of cards, use Flexbox. If you are placing regions of a page that need to line up in both directions, use Grid. Most real pages use Grid for the page skeleton and Flexbox inside each region. They are partners, not competitors.