CSS Grid Generator
Note: A 1fr track will not shrink below its content, because fr has an automatic minimum. One long URL or a wide table then blows the whole layout out. minmax(0, 1fr) is the version that behaves.
The first is the fr unit. It is not a percentage; it distributes what is left after fixed tracks and gaps have taken their share, which is why 1fr 1fr 1fr with a gap still fits, while 33.33% three times overflows by exactly two gaps. It is also why a 1fr track containing a long unbreakable string can refuse to shrink: fr's default minimum is auto, not zero. minmax(0, 1fr) is the fix, and it is the single most common grid bug there is.
The second is that repeat with auto-fit or auto-fill turns a grid responsive with no media queries at all. repeat(auto-fit, minmax(240px, 1fr)) means as many columns as fit at 240 pixels or wider, sharing the space equally. The difference between the two keywords only shows when there are fewer items than columns: auto-fill keeps the empty tracks, so the items stay their natural width, while auto-fit collapses them, so the items stretch. For a card grid you almost always want auto-fit.
Named areas are the other half. Drawing the layout as a grid of names in grid-template-areas makes the CSS readable at a glance and makes rearranging it for mobile a matter of redrawing the picture, rather than recalculating a set of line numbers. Every string must have the same number of columns, and a name repeated in non-adjacent cells is an error that silently voids the whole declaration.
Frequently Asked Questions
Why does my grid overflow when the columns are 1fr each?
Because fr has an automatic minimum size, so a track will not shrink below the widest unbreakable thing inside it — a long URL, a wide table, a preformatted block. Use minmax(0, 1fr) instead of 1fr and the track can shrink properly.
What is the difference between auto-fit and auto-fill?
Only visible when the items do not fill the row. auto-fill keeps the empty tracks in place so items stay their minimum width; auto-fit collapses them so the existing items stretch to fill the row. For a card grid that sometimes has two items, auto-fit is what you want.
Why is my grid-template-areas declaration being ignored?
Almost always because the strings do not form a rectangle — every row must have the same number of names — or because one name appears in two areas that do not touch. Either makes the whole declaration invalid, and it is dropped in full rather than partially applied.
Should I use grid or flexbox?
Grid when you are laying out in two dimensions and the container should decide the structure. Flexbox when content is flowing along one axis and its own size should decide the wrapping. A row of buttons is flexbox; a page layout is grid.
