CSS grid generator that checks grid-template-areas before you paste it

Two rules, and both fail silently. Every row string must contain the same number of cells, and every named area must form a solid rectangle — all the cells inside its bounding box have to carry that name, with no gaps and no other area cutting into it. An L-shaped region, a name that appears in two disconnected places, or a row with one cell too few makes the whole property invalid, and an invalid property is dropped. Nothing is logged, no warning appears; the grid just falls back to automatic placement and your layout looks scrambled for no visible reason. Load the “A broken L-shape” preset above to see the exact error this page reports for it.

fr divides up what is left over after everything else has been accounted for, including the gaps. A percentage is measured against the container’s own content box and knows nothing about the gaps at all. So `1fr 1fr` with a 20px gap gives two columns that exactly fill the row, while `50% 50%` with the same gap overflows it by 20px — the two halves plus the gap add up to more than the whole. Percentages are the right tool when you genuinely want a track measured against the container regardless of its neighbours; for “share the remaining space”, fr is what the unit was invented for.

Because 1fr is really minmax(auto, 1fr), and that auto minimum is the size of the content. A long unbroken string, a wide table or an image with no max-width sets a floor the track cannot go below, so the grid overflows its container instead of the column narrowing. The fix is to write the track as `minmax(0, 1fr)`, which sets the floor to zero and lets the content be squeezed — and then to make sure the content inside can actually cope, usually with overflow or min-width: 0 on the child. This is the most common “CSS Grid is broken” report there is, and it is not a bug.

Both are used with repeat() to create as many tracks as fit — `repeat(auto-fill, minmax(200px, 1fr))` — and they only differ when there are fewer items than there is room for. auto-fill keeps the empty tracks: with space for five columns and three items, you get three filled columns and two empty ones holding their width, so the items stay at the left. auto-fit collapses the empty tracks to zero width, so the remaining fr values share the whole row and the three items stretch to fill it. Pick auto-fill when items must keep a consistent width whatever the count, and auto-fit when a half-empty row should still look full. Neither can be painted onto an area map, because the number of cells is not known until the container is measured, which is why they are not offered in the fields above.

minmax() gives a track a floor and a ceiling: minmax(160px, 1fr) never goes below 160px, and above that shares leftover space like any other fr track. That combination is most of what responsive grid layout is made of. The reversed form fails because an fr value is a share of the space left over — it cannot be evaluated until the minimums of every track are known, so it cannot itself be a minimum. Put the fr in the second position and the declaration is valid; leave it in the first and the browser drops grid-template-columns entirely, taking your other tracks with it. The track fields above reject it with that explanation rather than passing it through.

You do not need them, and for a grid of uniform tiles they are more ceremony than they are worth — `grid-column: span 2` on the one wide tile is shorter and clearer than naming every region. Named areas earn their place when a layout has distinct parts that a reader has to hold in their head: a header, a rail, a body and a footer are far easier to check in a quoted map than as eight line numbers spread across four rules. They also survive changes better, since inserting a column shifts every line number after it but leaves the names alone. One useful bonus: naming an area implicitly creates line names around it, so `grid-column: main-start / main-end` works without declaring anything further.

Gaps are taken out first. The browser subtracts the total gap from the available space, sizes the fixed and content-based tracks, and only then divides what remains among the fr tracks. That is why adding a gap to a grid of fr columns narrows the columns rather than overflowing the container, and why the same grid built from percentages breaks instead. It also means a percentage gap is resolved against the container’s size on that axis, so a percentage row gap grows as the container gets taller.

The grid creates implicit rows for them and keeps going. Explicit tracks are the ones you declared; anything past them lands in implicit tracks, which are sized by grid-auto-rows — `auto` by default, so they fit their content. That is often exactly what you want for a list of unknown length, and occasionally a trap: a child accidentally placed on row 9 of a three-row grid silently creates rows 4 through 8 as empty strips. This generator only draws the explicit grid, because implicit tracks depend on how many children you have at runtime, which is not something a static map can know.

No, and the split is more useful than the rivalry. Grid places children into a structure you defined ahead of time, in two dimensions at once — you are describing the page, and the content goes where you put it. Flexbox distributes children along one axis according to their own sizes — you are describing a row or a column, and the content decides how much room it takes. A card layout is Grid; the row of buttons inside one of those cards is Flexbox. Most real pages use both, usually within a few elements of each other.