Choose responsive auto-fit tracks or a fixed column count, then set the minimum card width, gap, alignment and item count: the preview is a real CSS Grid and the output panel shows the complete rule you would paste, from grid-template-columns to gap, align-items and justify-items.
Runs locally in your browserPick fixed columns or a responsive auto-fit track, set the minimum card width, the gap and the item count, and the preview renders that exact CSS Grid while the output panel shows the rule you would paste: display: grid, grid-template-columns, gap, align-items and justify-items.
The numbers on this page are measured, not copied from the spec. The workbench starts in auto-fit with a 180 px minimum, a 16 px gap and 8 items; in a 1360 px window the preview box is 494 px wide and the same grid reflowed to 2 tracks at 180 px, 5 tracks at 80 px and a single track at 600 px.
Auto-fit writes repeat(auto-fit, minmax(min(100%, 180px), 1fr)) — the min(100%, …) guard stops a single track from overflowing a container narrower than the minimum — and fixed mode writes repeat(4, minmax(0, 1fr)). Both exports also carry display: grid, gap, align-items and justify-items, so the panel contains a complete rule rather than a fragment.
The minimum width is what decides the column count: measured in the 494 px preview, 180 px produced 2 tracks, 80 px produced 5 and 600 px left a single track. Gap is one value that applies to rows and columns alike.
The four number fields have hard limits: columns 1-12, minimum card width 80-600 px, gap 0-96 px, preview items 1-24. Typing 20 columns used to draw 12 tracks while the field still said 20; the field now snaps to 12 when the edit is committed, and 9999 → 600 px, 200 → 96 px and 30 → 24 items behave the same way.
Empty, non-numeric and decimal input is folded into the range as well: 3.7 becomes 4, -5 becomes 1, and a cleared field falls back to the smallest allowed value. While you are still typing, the preview keeps following the value but the field is left alone.
It writes one container rule plus a block of sample items — nothing more. There are no named grid areas (grid-template-areas), no per-item placement such as span or row/column, no auto-rows and no dense packing, and the .grid / .grid__item class names are scaffolding to rename for your own markup.
Everything runs in the page: while the controls were driven and the code copied, the browser made no request at all. The same script also drives four other front-end generators (bezier, clamp, blurhash, gradient), and those pages were byte-identical after the change; the grid page has no horizontal overflow at 320, 390, 768 or 1360 px.