CSS Grid Generator
Columns, rows and gap โ live preview, editable fr tracks, copy the code.
About this generator
Set columns, rows and gap; edit each column track directly (px, %, fr, auto all welcome); tap a preset โ holy grail, sidebar, thirds โ and copy the CSS. The preview obeys in real time, which is how fr units stop being abstract.
The fr unit, and one line worth memorising
fr divides whatever space remains after fixed tracks take theirs: 200px 1fr 200px is the classic app shell in one declaration; 2fr 1fr is a resilient two-thirds split. The single most useful line in modern CSS โ repeat( auto-fill, minmax(200px, 1fr)) โ makes cards wrap responsively with zero media queries; paste it into the first track box and watch. Grid versus flexbox, settled in one sentence: grid places items in two dimensions from the container down, flexbox flows them in one dimension from the content out โ pages are grids, toolbars are flexes, and they nest happily. The flexbox playground handles the other half; image sizing fills the cells.
Frequently asked questions
What does 1fr mean in CSS Grid?
One share of the space left after fixed-size tracks are placed. 200px 1fr 200px gives fixed sidebars and a fluid middle; 2fr 1fr splits remaining space two-to-one.
How do I make a responsive card grid without media queries?
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) โ cards stay at least 200px, grow to share space, and wrap as the container narrows. Paste it into a track box here to see it work.
When should I use grid instead of flexbox?
Grid for two-dimensional layout imposed from the container (page shells, card walls, dashboards); flexbox for one-dimensional flows sized by content (toolbars, button rows). They nest freely.
Can I mix px, %, fr and auto tracks?
Yes โ that's the point of editable tracks here. Fixed px tracks claim space first, then fr units share the remainder; auto sizes to content.