The one line worth learning
Most of what makes CSS Grid useful for page layout sits in a single declaration:
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
That tells the browser to fit as many columns as it can while none drops below 220 pixels, and to share whatever is left over equally between them. The result reflows from four columns to three to one as the screen narrows, without a media query anywhere. A card list, a product grid, a set of team photos — all of them stop needing breakpoints.
The [msm_tool slug="grid-generator"] writes that line along with the simpler equal-column and content-sized variants, but the value is in understanding what the minimum does, because that number is where your layout reflows.
fr is not a unit of size
The fr unit divides the space that is left after everything else has been accounted for — fixed track widths, gaps, content that refuses to shrink. Three columns of 1fr take one third of the remainder each, whatever is inside them.
That is different from auto, which sizes each track to its own contents and produces uneven columns. It is also different from a percentage, which is a fraction of the container and does not account for the gaps — three columns of 33.33% plus two gaps overflows, and 1fr does not.
auto-fit and auto-fill
These look interchangeable and behave differently in exactly one situation: when there are fewer items than tracks.
auto-fit collapses the empty tracks, so the items you do have stretch to fill the row. auto-fill keeps them, leaving space where a column would have been.
Neither is correct in general. If a two-item row should stretch across the full width, use auto-fit. If those two items should stay the width they would have been in a full row — which is usually what you want when the grid fills up over time — use auto-fill.
Choosing the minimum
The minimum in minmax() is your breakpoint, expressed as a property of the content rather than of the device. The column count changes when the container can no longer fit another track at that width.
Pick it from what has to fit inside. A card with a heading and two lines of description needs perhaps 220 to 280 pixels before it starts looking cramped; a photo tile can go much smaller; a data table cannot. Choosing 300 because it produces three columns on your laptop is choosing a breakpoint by accident.
One trap worth knowing: a fixed minimum can overflow a narrow container, because minmax(220px, 1fr) means the track will not go below 220 pixels even if there is not 220 pixels available. On a 200-pixel container it overflows. minmax(min(220px, 100%), 1fr) is the defensive form.
Rows are usually better left alone
Declaring a fixed number of rows means content beyond them lands in rows you never described, sized by whatever the implicit row rule happens to be. Setting columns and letting rows create themselves is the more forgiving arrangement, and it is what nearly every card grid wants.
Declare rows when the layout genuinely is two-dimensional and known in advance — a dashboard with a header, sidebar and content area, for instance, where you know exactly how many rows there are and what each should do.
Gaps
Row and column gaps are set separately here because they rarely want to be equal. Vertical space between cards usually needs to be larger than horizontal space to read as deliberate grouping, and a single gap value forces them together.
Gaps are also the reason grid replaced margin-based spacing. There is no leading or trailing gap to strip off, no first-child or last-child rule, and no negative margin on the container to compensate.
Grid or flexbox
The distinction that holds up in practice: use grid when the layout is defined before the content, and flexbox when the content decides the sizes.
A gallery of equal cards is a grid — you know the shape and the items fill it. A row of buttons whose widths depend on their labels is flexbox. A page skeleton with a header, sidebar and footer is a grid. A navigation bar with a logo on the left and links on the right is flexbox.
They also nest happily, and most real pages use both. A grid for the page, flexbox inside each card.
What to check before shipping
- One item. Does a single card stretch across the entire row, and should it? This is where
auto-fit versus auto-fill shows up.
- An awkward count. Five items in a grid that fits four leaves one alone on the second row. That is fine, but it should look intentional.
- Long content. A card with a heading four times longer than the others sets the row height for all of them, since rows size to their tallest item.
- A narrow container. Not just a narrow screen — a grid inside a sidebar has far less room than the same grid in a main column.