CSS Grid Generator
Set columns, rows and gap to generate copy-ready CSS grid code with a live preview. Great for prototyping grid layouts.
Layout presets (10)
Drag across cells to paint a rectangle, or click one cell at a time. Every named area must stay rectangular.
Live preview
One-dimensional: flexbox generator.
Build a CSS grid with named areas
Paint a letter grid for template-areas, or pick a preset. Preview shows each region in a distinct tint.
FAQ
What is grid-template-areas?
A way to name regions of a layout (header, sidebar, main…) and place items by name instead of line numbers. Click cells below to paint area letters — the CSS updates live.
Can I start from a preset?
Yes — ten layout presets including Holy grail, dashboard, magazine and app shell load named areas in one click.
Is anything uploaded?
No. CSS is generated entirely in your browser.
Last updated: