Writing grid tracks and area names in one pass
Grid works by defining column and row tracks first and then placing elements onto that lattice. Pick a column style here and the repeat, fr, minmax or auto-fit combination comes out as a track string; type area names and you also get a grid-template-areas block plus a .area-name selector for every region.
What is checked when areas are used
Three things: whether every line has the same cell count, whether that count matches the column count, and whether each repeated name forms a rectangle. The offending line number is reported. An L-shaped area makes the browser drop the whole declaration silently, which is hard to diagnose from the rendered page alone. Property syntax follows the W3C CSS Grid Layout specification (as of October 2026).
What it does not do
It does not write per-item grid-column or grid-row line numbers, subgrid, or any flex container property. Single-axis alignment belongs to the flexbox properties. auto-fit varies the column count with the container width, so it cannot be combined with areas and that pairing is blocked.
Frequently Asked Questions
If a repeated name does not form a rectangle the browser drops the whole declaration. This generator names the offending area before it writes the CSS.
1fr shares out the leftover space but a long cell can still push the track wider. minmax(min, 1fr) keeps a floor so columns do not collapse on narrow screens.
Both fill the width with as many tracks as fit, but when there are too few items auto-fit collapses the empty tracks while auto-fill keeps them. This generator writes auto-fit only.