Visual CSS Grid Layout Generator
Drag across cells to merge them into a named area — merged areas now render as one real block, so one column can stay a single tall region while its neighbor splits into three stacked rows. Size each column and row individually too: px, fr, auto, or content-based.
Why grid-template-areas is hard to hand-write
Each row of a grid-template-areas value is a quoted string of area names, and every string needs the same number of names as there are columns — one typo or misalignment and the whole layout collapses. Painting the layout visually removes that bookkeeping, and starting from a Holy Grail, Sidebar, or Dashboard preset skips the blank-canvas problem entirely.
Using the generated CSS grid code
Apply the container rules to your wrapping element, then add grid-area: <name>; to each child using the class rules the generator writes underneath the template. Columns and rows aren't locked to equal 1fr tracks either — click any column or row size to cycle through fixed pixel widths, auto, content-based sizing, or flexible fr units.
Worked example: a classic header, sidebar, main, footer layout
The painter opens on a 3 by 3 grid with four named areas already merged. This is the CSS it writes:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
gap: 12px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
Each quoted string in grid-template-areas is one row, and each word in it is one cell. Writing the same name in several cells merges them into one area, so header header header spans the full top row, and main main spans the two right-hand columns of the middle row. Every area has to form a rectangle, because L-shapes aren't valid.
The 1fr 1fr 1fr tracks share the available space equally, and gap: 12px sets the spacing between cells. Each class then claims its area with grid-area, so the HTML order doesn't matter.
Where each area sits on the default grid
| Area | Columns | Row |
|---|---|---|
| header | 1 to 3 (full width) | 1 |
| sidebar | 1 | 2 |
| main | 2 to 3 | 2 |
| footer | 1 to 3 (full width) | 3 |
Frequently asked questions
What's the difference between CSS Grid and Flexbox?
Grid lays out content in two dimensions (rows and columns) at once, which is why it's the right tool for dashboard or magazine-style layouts. Flexbox is one-dimensional — better suited to a single row or column of items, like a nav bar.
What does grid-template-areas actually do?
It lets you name regions of your grid and place items into those named regions by name instead of by row/column numbers, which is why merging cells visually in this tool produces readable area names in the output CSS.
Why is my grid item overflowing its cell?
By default, grid items don't shrink below their content's minimum size. Setting min-width: 0 (or min-height: 0 for rows) on the item is the standard fix when content like long text or an image is forcing a column wider than intended.
Do I need to set explicit row heights?
No — rows sized with auto will grow to fit their content, which works for most layouts. Explicit row heights (or fr units) are only needed when you want every row to take up a fixed or proportional share of the available space.
