CSS Grid generator

A two-dimensional layout model

CSS Grid describes a layout as explicit rows and columns, then places items into the cells those tracks create. That two-axis control is what sets it apart from flexbox, which only ever lays out along a single line. Reach for Grid when both dimensions matter at once — a page shell with header, sidebar, main column and footer, or a card wall where rows must stay aligned even when individual cards differ in height. Items can span multiple tracks (grid-column: 1 / 3) and even overlap, so Grid also handles magazine-style and layered designs that would otherwise need absolute positioning.

Fixed tracks vs. auto-fit + minmax

This generator covers the two patterns that carry most production layouts. A fixed column count — repeat(3, 1fr) — suits known structures: a 12-column app grid, or a 240px 1fr sidebar split. The auto-fit + minmax pattern, repeat(auto-fit, minmax(200px, 1fr)), is the responsive workhorse: the browser packs in as many columns as the minimum width allows, then stretches them to fill the row — a fluid card grid with no media queries at all. Swap auto-fit for auto-fill when you want empty trailing tracks preserved rather than collapsed.

fr units, gap and a common gotcha

The fr unit distributes leftover space after fixed sizes and gaps are subtracted, so 200px 1fr 1fr gives the fixed column its 200px and splits the rest in two. The most common surprise is grid blowout: a long word or a wide image forces a track past its 1fr share, because a track's implicit minimum size is auto, not zero. The fix is minmax(0, 1fr), which lets the track shrink below its content. gap spaces tracks without adding outer margins, retiring the old fragile negative-margin gutter hacks.