What is the CSS Grid Template Areas?
Visually design named grid areas by drawing a layout grid. Assign area names to cells, then copy the grid-template-areas and placement CSS.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Grid Template Areas
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Draw your layout grid
Set the number of rows and columns, then click and drag to paint cells with named areas. Type the area name in each cell.
Set column and row sizes
Enter values for grid-template-columns and grid-template-rows. Use fr, px, rem, or keywords like auto and min-content.
Copy the complete CSS
Click Copy to get the container rules with grid-template-areas and the individual area placement rules for each named section.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main "
"footer footer footer";
grid-template-columns: 260px 1fr 1fr;
grid-template-rows: 64px 1fr 56px;
gap: 16px;
height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Named areas make the layout self-documenting. Reading the template string is nearly as clear as a wireframe.
Pro tips for better results
Use a dot (.) for empty cells
A period in grid-template-areas represents an unnamed empty cell. Multiple periods with no spaces (.... ) represent multiple empty cells: "header . aside".
Area shapes must be rectangular
Named areas must form a rectangle. An L-shaped area is invalid CSS and will cause the entire grid to fail. If you need non-rectangular regions, use grid-column and grid-row directly.
Named areas with grid-area are the most readable Grid code
A layout defined with grid-template-areas is immediately legible as a visual map. Prefer it over numeric line references for page-level layouts.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.