Grid, including the parts that are hard to type
repeat(auto-fit, minmax(...)) and named template areas, both built from controls and both shown as the CSS you would write.
Grid, including the parts that are hard to type
repeat(auto-fit, minmax(...)) and named template areas, both built from controls and both shown as the CSS you would write.
auto-fit and auto-fill are not the same
auto-fill creates as many tracks as will fit, leaving empty ones. auto-fit creates the same tracks then collapses the empty ones, so the remaining items stretch to fill the row.
With three items in a container wide enough for five: auto-fill leaves two gaps on the right, auto-fit stretches the three across the whole width. Neither is wrong; they answer different questions.
minmax(180px, 1fr) is the pattern that makes a responsive grid without a single media query. The minimum is what forces a wrap; the 1fr is what shares the leftover space.
Reduce the container width above to see the grid rewrap without touching a breakpoint.
The one-line responsive grid
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) replaces a media query for most card layouts. The grid finds its own number of columns based on the space available, which is what a breakpoint was approximating.
Named areas make the intent readable
Template areas are worth it when the layout has meaning — a header, a sidebar, a main region. The CSS reads like a picture of the page, and moving something means editing that picture rather than recalculating line numbers.
They are not worth it for a uniform grid of cards, where the areas would just be a list of identical names.