CSS Grid Template Areas: Layouts with Named Regions

CSS Grid template areas let you define your page layout using named regions that read like a visual map of your page. Instead of working with abstract column and row numbers, you literally draw your layout in CSS with names:

`css grid-template-areas: "header header header" "sidebar content content" "footer footer footer"; `

Look at that CSS and you can see the layout. Header spans the full width. Sidebar sits on the left, content takes two columns on the right. Footer spans the full width. This is dramatically more readable than grid-column: 1 / 3 and grid-row: 2 / 3 for every element.

Template areas are not just syntactic sugar. They make responsive redesigns trivial, because changing the layout means rewriting a few strings rather than recalculating column and row positions for every element.

Setting Up a Template Areas Layout

The setup requires two things: define the areas on the grid container, and assign each child element to an area.

`css .page { display: grid; grid-template-columns: 250px 1fr 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header header header" "sidebar content content" "footer footer footer"; gap: 20px; min-height: 100vh; }

.header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .footer { grid-area: footer; } `

Each string in grid-template-areas represents one row. Each name in the string represents one column cell. When the same name repeats across cells, that area spans those cells.

Rules for the template areas syntax: - Each row string must have the same number of names - Names can only form rectangles (no L-shapes or T-shapes) - Use a period (.) for empty cells - Area names are case-sensitive

The CSS Grid Generator lets you build a layout interactively and copy the matching CSS, including template areas, before you wire it into your project.

Responsive Layouts with Template Areas

Template areas come into their own when the layout needs to change at different screen sizes. Rewrite the template strings and the layout shifts:

`css / Mobile: everything stacked vertically / @media (max-width: 768px) { .page { grid-template-columns: 1fr; grid-template-areas: "header" "content" "sidebar" "footer"; } }

/ Tablet: sidebar below content / @media (min-width: 769px) and (max-width: 1024px) { .page { grid-template-columns: 1fr 1fr; grid-template-areas: "header header" "content content" "sidebar sidebar" "footer footer"; } } `

Notice how the mobile layout puts content before sidebar, even though sidebar comes first in the desktop layout. This is the same reordering concept as Flexbox order, but expressed as a visual map rather than numerical values.

You can also change column proportions between breakpoints without touching the child elements. The grid-template-columns definition controls the sizing; the template areas control the placement. They are independent of each other.

For one-dimensional rows or columns inside a grid area, switch to Flexbox. The CSS Flexbox Generator helps you tune alignment and wrapping before pasting the rules into your stylesheet. Grid handles the page, Flexbox handles the parts.

Empty Cells and Complex Layouts

The period (.) character creates empty cells in your grid. This is useful for layouts where not every cell is occupied:

`css grid-template-areas: "header header header" ". content sidebar" "footer footer footer"; `

The first cell of the second row is empty. Content and sidebar share the remaining space. You can use multiple periods for readability:

`css grid-template-areas: "header header header" "...... content sidebar" "footer footer footer"; `

For more complex layouts, think about what rectangles you need:

`css / Dashboard layout / grid-template-areas: "nav nav nav" "stats stats alerts" "chart table alerts" "footer footer footer"; `

The alerts panel spans two rows on the right. Stats spans two columns on the top. Chart and table split the bottom-left area. This would require careful grid-column and grid-row math with numeric positions, but with named areas it is immediately clear.

Remember that areas must form rectangles. You cannot have an L-shaped area. If you need an L-shape, split it into two areas and style them to look connected.

Template Areas vs Numeric Grid Placement

Both approaches produce the same result. The choice is about readability and maintenance:

Use template areas when: - The layout has distinct, named sections (header, sidebar, content, footer) - You need to change the layout at multiple breakpoints - Multiple developers work on the CSS and need to understand the layout quickly - The layout is relatively fixed (the same sections appear on every page)

Use numeric placement when: - Items are dynamically positioned (like a calendar or data grid) - You are using repeat() and auto-fit for responsive item grids - The layout does not map to named sections - You need items to overlap (template areas do not support overlapping)

You can mix both approaches. Define the overall page layout with template areas, then use numeric placement for dynamic content grids inside a grid area:

`css .page { grid-template-areas: "header" "content" "footer"; } .content { grid-area: content; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } `

The page layout uses named areas. The card grid inside .content uses numeric auto-placement. Clean separation of concerns.

Performance and Best Practices

CSS Grid template areas have no performance penalty compared to numeric grid placement. The browser computes the same layout algorithm regardless of which syntax you use to define it.

Best practices:

Keep area names descriptive but short: header, nav, main, sidebar, footer are better than page-header-area, navigation-section, main-content-wrapper. You will type these names multiple times.

Align the template strings visually: use consistent spacing so the template areas read like an ASCII art layout. This is where the readability advantage comes from.

Do not over-nest grids: a page-level grid with 4 to 6 areas is clean. Each area can contain its own grid for internal layout. But nesting more than 2 levels deep makes debugging harder.

Use shorthand carefully: grid-template combines columns, rows, and areas into one declaration. It is compact but harder to read than separate properties. Prefer explicit properties for maintainability.

Minify for production: the visual formatting that makes template areas readable in development adds bytes in production. Run your CSS through a CSS Minifier before deploying to strip the whitespace.

Test in Firefox Grid Inspector: Firefox DevTools has the best CSS Grid debugging tools. It overlays the grid lines and area names directly on the page, making it easy to verify your layout matches your intent.

FAQ

Can I animate between different template area layouts?

Not directly. CSS cannot transition between different grid-template-areas values because they are string values, not numeric. For animated layout changes, use numeric grid placement with transitions on grid-column and grid-row properties, or use JavaScript to animate element positions.

Do template areas work with auto-placement?

No. Auto-placement (grid-auto-flow) ignores template areas. If you want some items auto-placed and others in named areas, explicitly assign the named-area items with grid-area and let the remaining items auto-place in the leftover cells.

Can two elements share the same grid area?

Yes, by assigning the same grid-area name to multiple elements. They will stack on top of each other in that area, similar to absolute positioning. This is useful for overlay effects but requires z-index management.

Is CSS Grid supported in all browsers?

CSS Grid has been supported in all major browsers since 2017. Template areas specifically have full support in Chrome, Firefox, Safari, and Edge. There are no browser compatibility concerns in 2026.