CSS Grid Layout Builder
Click cells to paint named grid areas. Generate grid-template-areas CSS instantly.
Layout presets
Column sizes
Row sizes
Named areas
CSS output
HTML snippet
About this tool
Build CSS Grid layouts visually by painting named areas. Click and drag to assign header, sidebar, main, footer regions. Generates grid-template-areas CSS plus matching HTML. 8 presets: Holy Grail, Blog, Dashboard, Magazine, App Shell, and more.
Frequently asked questions
How is this different from the CSS Grid Generator already on DevToolbox?
The existing CSS Grid Generator lets you define column counts, sizes, and gaps numerically. This Grid Layout Builder adds visual area painting — you click and drag cells to assign named regions like header, sidebar, and main, then it generates grid-template-areas CSS automatically.
What is grid-template-areas?
grid-template-areas is a CSS property that lets you name regions of a grid layout using quoted strings. For example: grid-template-areas: "header header" "sidebar main" "footer footer". Each child element then uses grid-area: header to place itself in the correct region.
How do I paint areas on the grid?
Select an area color from the Paint area bar, then click or click-and-drag across cells to fill them. Switch to Erase mode to clear cells. Double-clicking a cell also clears it.
Can I rename the areas?
Yes. In the Named areas panel on the right, click any area name to edit it. The grid cells and CSS output update automatically. Names must be lowercase letters, numbers, hyphens, or underscores.
What layout presets are included?
Holy Grail, Blog, Dashboard, Landing Page, Card Grid, Sidebar Left, Magazine, and App Shell. Each preset loads with appropriate column and row counts.
How do I control column and row sizes?
Use the Column sizes and Row sizes dropdowns below the canvas. Each column or row can be set independently to 1fr, 2fr, 3fr, auto, min-content, max-content, a fixed px value, or minmax().