CSS Grid Generator
Visually build a CSS grid — size each column and row track (fr / px / auto / minmax), set the gap and alignment, see a live preview, and copy the CSS. 100% in your browser.
No explicit rows — content flows into automatic rows. Add one to size rows.
Live preview
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
🔒 Generated in your browser — nothing is uploaded.
Build a CSS grid without memorizing the syntax
Add as many column and row tracks as you need and give each one its own size — 1fr, 200px, auto, min-content or a minmax(100px, 1fr) — then set the gap between cells and how items align. The tool writes the matching display: grid rule with grid-template-columns/grid-template-rows for you, with a live preview so you can see the layout update as you tweak it.
Everything runs in your browser: nothing is uploaded and there is no sign-up. Copy the generated CSS straight into your stylesheet.
Frequently asked questions
Can I make columns different widths?
Yes. Each track has its own size field — mix fixed and flexible tracks like a 200px sidebar next to a 1fr main column, or use minmax(100px, 1fr) for a track that flexes between a floor and the free space.
Do I have to set rows?
No. Leave the rows list empty and the grid creates rows automatically as items flow in — what most content grids want. Add row tracks only when you need specific row heights.
What track sizes can I type?
fr units, px/%/em/rem lengths, auto, min-content, max-content, and minmax()/fit-content(). Anything unrecognized falls back to 1fr so the copied CSS is always valid.
What is the difference between gap and justify-items?
gap is the spacing between grid cells; justify-items and align-items control how each item is positioned inside its own cell (stretch to fill, or start/center/end).
Does anything I enter get uploaded?
No. The CSS is generated entirely in your browser and nothing is sent to a server.