CSS Grid Template Areas Generator

grid-template-areas lets you lay out a page (header, sidebar, main, footer) using human-readable named regions instead of raw column/row numbers. This generator lets you set the grid dimensions and assign names to cells visually, then copy the resulting CSS.

How to use the CSS Grid Template Areas Generator

Set rows and columns. Choose the grid dimensions for your layout.
Set the gap. Control spacing between grid cells.
Assign named cells. Name each region (e.g. header, sidebar, main, footer) to build the layout.
Copy the CSS. Copy the generated grid-template-areas CSS along with the matching child-element rules.

Frequently asked questions

What is grid-template-areas in CSS?

It's a CSS Grid property that lets you define a layout using named regions in a readable text grid (e.g. "header header" / "sidebar main"), then assign each child element to a named area with grid-area.

How do I name a grid area?

Give the container a grid-template-areas value with your region names, then set grid-area: name on each child element to place it in that named region.

How is grid-template-areas different from grid-template-columns?

grid-template-columns/rows define the raw track sizes; grid-template-areas is a higher-level, more readable way to describe which regions of that grid each element occupies.

Can I export the layout as Tailwind classes?

grid-template-areas has limited direct Tailwind utility support, so this generator focuses on clean raw CSS output for named grid layouts.

Is this grid-template-areas generator free?

Yes — completely free with no sign-up, and it runs entirely in your browser.

Does it support a dark mode preview?

Yes, toggle the light/dark preview to see the named layout in both themes.