CSS Grid Generator
Visual CSS Grid editor with rows × columns sizing (use any track value: fr, px, %, auto, minmax, repeat), independent row and column gaps, named grid-areas with click-to-paint cells, justify/align items and content, 6 ready-to-use templates and live preview. Output as plain CSS (with .area selectors) or Tailwind arbitrary-value classes.
Use any CSS value: 1fr, 200px, minmax(120px, 1fr), repeat(auto-fill, minmax(180px, 1fr)), auto.
Everything runs in your browser. Nothing is uploaded.
How to use this css grid generator
- Pick a template (12-column, Holy Grail, Dashboard, Bento, Gallery, Card row) or set rows + columns yourself.
- Edit any track with valid CSS: 1fr, 200px, minmax(120px, 1fr), repeat(auto-fill, minmax(180px, 1fr)).
- Adjust row/column gaps with the sliders.
- Toggle 'named grid areas' to paint cells with area names — pick a color from the palette and click cells.
- Set justify/align items and content, copy the resulting CSS or Tailwind.
Frequently asked questions
What is grid-template-areas?
It's a way to lay out a grid by giving each cell a name, then assigning child elements to those names with `grid-area`. Great for headers/sidebars/main/footer.
What's the difference between fr, auto and minmax?
`fr` shares remaining space between tracks. `auto` sizes to content. `minmax(min, max)` clamps a track between two sizes — combined with `repeat(auto-fill, ...)` makes responsive grids.
Does the Tailwind output cover everything?
Best-effort: simple patterns (grid-cols-N, gap, items-X) use built-in classes; complex tracks fall back to arbitrary-value selectors.
Is anything uploaded?
No. The whole thing runs in your browser.