auto-fit vs auto-fill in CSS Grid

The canonical responsive grid is one line: `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))`. It creates as many columns as fit at a minimum of 200px each, lets them share the leftover space, and changes the column count as the container resizes — with no media queries at all.

Swap auto-fit for auto-fill and, in a container with enough items to fill every column, absolutely nothing changes. That is precisely why the distinction is so hard to internalise: in the common case the two are indistinguishable.

The difference appears only when there are fewer items than would fit. Picture a container wide enough for five 200px columns, holding three cards.

auto-fill creates all five tracks and keeps the two empty ones. The three cards stay at 200px and the right-hand side of the row is empty space.

auto-fit creates the same five tracks, then collapses the empty ones to zero width. The remaining three tracks absorb that space through their 1fr maximum, so the cards stretch to fill the whole row.

Note that the collapse is what does the work, not the fr unit on its own — with minmax(200px, 200px) the cards would not stretch under either keyword, because there is no flexible maximum for the reclaimed space to flow into.

Use auto-fit when items should expand to use the available space — a card grid, a gallery, a set of feature tiles. A row with two items looks deliberate rather than truncated.

Use auto-fill when a consistent item size matters more than filling the row: a calendar, a grid of fixed-size thumbnails, or any layout that items get added to over time and should not visibly resize as the count changes.

If you find yourself unsure, auto-fit is the more common choice in interface work, because a half-empty row usually reads as a bug even when it was intentional.