Home CSS Properties grid-template-areas CSS grid-template-areas Property Definition
Definition and Usage The grid-template-areas property names regions on a grid container. Each quoted string is one row of cell names. Items land in those regions with grid-area
The initial value is none. Set it on a grid container (display: gridgrid-template-rowsgrid-template-columnsgrid-template
Standard-track. Not deprecated and not experimental. Baseline widely available with CSS Grid.
Syntax
CSS Syntax grid-template-areas: none | <string>+ | initial | inherit ;
One string per row. Tokens inside a string are cell names (or . for empty).
Values
Property Values Value Description Try it noneDefault. No named areas <string>+One quoted string per row of area names . tokenEmpty / unnamed cell (one or more dots) Same name span Repeated names merge into one rectangular area initialResets to none inheritTakes the parent value (not inherited by default)
Approach
How to Use grid-template-areas Sketch the layout in strings, then assign children by name.
Set display: grid on the container. Write one quoted string per row (same cell count in every row). Repeat a name to span; use . for empty cells. Place items with grid-area: name matching those tokens. Map Meaning "a a" "b c"Wide a on top; b and c below "a ." "b c"Empty cell beside a "a a a" "b b c"Full-width header; b spans two columns
Try it
Live Preview Change only grid-template-areas. Items keep grid-area: a, b, and c.
Code
CSS Examples Each snippet focuses on grid-template-areas. Use Try It Yourself for a live editor.
1. Named areas 2. Empty cells 3. Spanning names Example 1 — Named Areas Two strings draw two rows. Place items with matching grid-area names.
<style>
.grid {
display: grid;
grid-template-areas:
"a a"
"b c";
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
</style>
<div class="grid">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div> How It Works One string = one row. "a a" is the first row; "b c" is the second.Same name merges. Two a tokens make a wide header cell.Columns follow the tokens. Each row has two cells, so the grid has two columns.Hook items up. grid-area: a places that child into the a region.Example 2 — Empty Cells with . A period leaves a cell unnamed so nothing claims it by area name.
<style>
.grid {
display: grid;
grid-template-areas:
"a ."
"b c";
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
</style>
<div class="grid">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div> How It Works Null token. . (or ...) marks an empty cell.Gap in the map. Top-right has no area name, so it stays blank.Other names still work. a, b, and c place as usual.Rows stay aligned. Every string still has two tokens.Example 3 — Spanning Names Repeat a name across cells to grow a rectangular region.
<style>
.grid {
display: grid;
grid-template-areas:
"a a a"
"b b c";
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
</style>
<div class="grid">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div> How It Works Full-width header. Three a tokens in a row make area a span all columns.Partial span. Two b tokens make b cover the first two columns of row two.Must be a rectangle. Spanned cells for one name must form a solid block.Three columns. The longest row token count sets the column count.Edge Cases & Pitfalls Invalid maps drop the whole property. Keep rows even and spans rectangular.
rectangle Non-rectangular names are invalid An L-shape or hole for one name makes the declaration invalid. Every named area must be a solid rectangle.
rows Every string needs the same cell count Uneven rows (for example "a a" then "b") invalidate the areas map.
dot . is empty, not a nameYou cannot write grid-area: .. Dots only leave gaps in the template.
place Names alone do not move items Defining a in the map does nothing until a child uses grid-area: a (or matching line longhands).
Compatibility
Browser Support grid-template-areas is a browser style property for CSS Grid. Node.js, Deno, and Bun do not apply it.
✓ Baseline · Widely available
grid-template-areas Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+, Opera, Samsung Internet 6+. Not supported in Internet Explorer.
Google Chrome 57+
Full support
Mozilla Firefox 52+
Full support
Apple Safari 10.1+
Full support
Microsoft Edge 16+
Full support
Opera 44+
Full support
Samsung Internet 6+
Full support
Internet Explorer All
Not supported grid-template-areas Supported with modern CSS Grid
Bottom line: Safe for modern grid layouts. No vendor prefix is required in current browsers.
Remember
Key Takeaways Role: name rectangular regions on the grid with strings.
Place items: grid-area: name matches a token in the map.
Empty cells: use . (or more dots) as a null token.
Invalid maps fail: uneven rows or non-rectangular names drop the value.
One line: grid-template-areas draws a named layout map; grid-area seats each item in that map.
Frequently Asked Questions What does grid-template-areas do? It names regions on a grid container with quoted strings. Each string is one row of cell names. Items use those names via grid-area.
What is the default value? none — the container defines no named grid areas.
How do I leave a cell empty? Use a null cell token: a single . or several dots (..., .....). That cell has no area name.
Why must same-name cells form a rectangle? A named area must be a solid rectangle. L-shapes or holes make the whole declaration invalid.
How is this different from grid-template? grid-template-areas sets only the name map. grid-template can set areas plus row and column sizes in one shorthand.
Which browsers support grid-template-areas? Baseline widely available: Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+. It is a browser style property, not a Node.js feature.
About the author Developer, cloud engineer, and technical writer
I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.
8 people found this page helpful
