CSS Grid Generator
NewVisually build CSS Grid layouts with track sizing, gaps, and grid-template-areas.
Grid controls
Set rows, columns, gap, track sizes, and optional template areas.
Template area painter
Choose an area name, then click cells to assign or toggle them.
Live preview
4 × 3Generated CSS
0 linesFrequently Asked Questions
Can I create my own custom area names?
Not in this tool. The painter uses a fixed palette of Empty, header, sidebar, main, aside, and footer, so custom labels are not supported.
Will it stop me from painting an invalid grid-template-areas layout?
No. It outputs the exact cell matrix you assign. If you paint a named area in a non-rectangular shape, the generated CSS can still be invalid in the browser even though the tool lets you create it.
What happens to my layout when I change the row or column count?
The tool preserves overlapping existing cells where it can and fills any new cells with . for empty. Rows and columns are both clamped between 1 and 6.
Do I have to type every track size manually?
No. Equal columns and Equal rows will reset tracks to 1fr, and if you leave track tokens out, the normalizer fills the missing positions with 1fr automatically.
Can I use it without named template areas at all?
Yes. If every cell is empty, the output still gives you display: grid, the track definitions, and the gap, but it omits grid-template-areas and the preview falls back to generic Item boxes.