CSS Grid Generator
Build a CSS grid visually — size every column and row track in fr, px, auto or minmax, set the gap and alignment, preview it live and copy the CSS. Free.
No explicit rows — content flows into automatic rows. Add one to size rows.
Live preview
Drag across the cells to place a div. Drag a div’s bottom-right handle to resize it.
Placed divs
No divs placed — the markup below is one plain div per cell, auto-placed by the browser.
CSS
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}HTML
<div class="grid"> <div>1</div> <div>2</div> <div>3</div> </div>
🔒 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 and the other CSS lengths, auto, min-content, max-content, minmax(), fit-content() and repeat(). A value the browser would not accept is not rewritten — it is named back to you and no CSS is written until you fix it, so the CSS you copy 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.