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 |
none
<string>
+
none | <string>+
<section id="page"> <header>Header</header> <nav>Navigation</nav> <main>Main area</main> <footer>Footer</footer> </section>
#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; }
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of 'grid-template-areas' in that specification. | Candidate Recommendation | Initial definition |
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.
grid-template-rows
, grid-template-columns
, grid-template
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas