The grid-template-areas
CSS property specifies named grid areas.
/* Keyword value */ grid-template-areas: none; /* <string> values */ grid-template-areas: "a b"; grid-template-areas: "a b b" "a c d"; /* Global values */ grid-template-areas: inherit; grid-template-areas: initial; grid-template-areas: unset;
Those areas are not associated with any particular grid item, but can be referenced from the grid-placement properties grid-row-start
, grid-row-end
, grid-column-start
, grid-column-end
, and their shorthands grid-row
, grid-column
, and grid-area
.
Initial value | none |
---|---|
Applies to | grid containers |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
none
- The grid container doesn’t define any named grid areas.
<string>
+- A row is created for every separate string listed, and a column is created for each cell in the string. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.
Formal syntax
none | <string>+
Example
HTML
<section id="page"> <header>Header</header> <nav>Navigation</nav> <main>Main area</main> <footer>Footer</footer> </section>
CSS
#page { display: grid; width: 100%; height: 250px; grid-template-areas: "head head" "nav main" "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } #page > header { grid-area: head; background-color: #8ca0ff; } #page > nav { grid-area: nav; background-color: #ffa08c; } #page > main { grid-area: main; background-color: #ffff64; } #page > footer { grid-area: foot; background-color: #8cffa0; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of 'grid-template-areas' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 57 291 | 16 | 52 402 | No | 44 283 | 10.1 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 57 | 57 291 | 16 | 52 402 | No | 44 | 10.3 |
1. From version 29: this feature is behind the Enable experimental Web Platform features
preference. To change preferences in Chrome, visit chrome://flags.
2. From version 40: this feature is behind the layout.css.grid.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
3. From version 28: this feature is behind the Enable experimental Web Platform features
preference.
See also
- Related CSS properties:
grid-template-rows
,grid-template-columns
,grid-template
- Grid Layout Guide: Grid template areas
- Video tutorial: Grid Template Areas