Responsive grid without media queries

The one-liner that replaces breakpoints

A media-query grid hard-codes column counts at fixed widths. The grid track repeat with auto-fit/auto-fill flips that around: you declare a minimum column width and let the browser decide how many fit.

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

Read it as: "make as many columns as fit, each at least 220px, sharing leftover space equally (1fr)." Resize the container and columns appear and disappear on their own.

auto-fit vs auto-fill

Both fit as many tracks as the container allows. The difference shows up when there is spare room after the last item:

• auto-fill keeps the empty tracks. Remaining items stay their minmax size and you get visible gaps where future cards would go.
• auto-fit collapses the empty tracks to zero width, so the real items stretch (via 1fr) to fill the row.

Use auto-fit for card grids you want to look full; auto-fill when a fixed column rhythm matters more than filling the row.

Capping how wide columns get

1fr lets columns grow without limit, which on a wide screen can leave you with two enormous cards. Swap the upper bound of minmax() from 1fr to min(100%, 30rem) (or similar) and a column will grow only to that cap, then the grid adds another column instead.

min() inside minmax() is also the standard guard against overflow: minmax(min(100%, 220px), 1fr) never demands more than the container has, so narrow viewports don't scroll sideways.

Packing the leftovers

When items span multiple tracks, auto-fit rows can leave holes. grid-auto-flow: dense lets the browser backfill those gaps with later, smaller items — great for mixed-size galleries where you care about a tight mosaic more than strict source order.