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.
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.
Why does `gap` not work in my Grid on older Safari?
`gap` for CSS Grid is supported in Safari 10.1+ (2017) and `gap` for Flexbox in Safari 14.1 (2021). If you support iOS 13 or older, fall back to `grid-row-gap` and `grid-column-gap` (which work since Safari 10), and use margins on flex children rather than `gap`.