CSS Grid Template Areas Builder
Build named CSS grid template areas and copy the generated layout CSS.
Name your grid regions
grid-template-areas lets you name regions — header, sidebar, main, footer — and arrange them in an ASCII-art map that reads like the layout it produces. This builder turns your named areas into the full grid CSS, so you set grid-area on each child and the browser handles placement.
It is the most readable way to express a page skeleton, and rearranging the layout is as simple as editing the map rather than juggling column and row numbers.
Copy-ready grid CSS
Every row of the template must have the same number of columns or the whole declaration is invalid, which is the most common mistake this avoids. The CSS is generated in your browser and never uploaded.
Frequently asked questions
How do I describe the layout?
One line per grid row, with an area name for each column, such as "header header" then "sidebar main". The tool generates grid-template-areas plus a grid-area rule for each name.
Why is my layout ignored?
Every row needs the same number of cells, and each named area must form a rectangle. If an area is L-shaped or a row is short, the browser drops the whole grid-template-areas declaration.
What do the columns and min height fields set?
Columns is grid-template-columns (for example "1fr 3fr" for a narrow sidebar), and min height gives each preview area a minimum height so empty regions stay visible.
Related tools
Practical utilities for front-end design and implementation work.