grid-template-areas

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

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	57.0^[1]	No support^[3]	52.0 (52.0)^[2]	No support^[3]	44^[4]	10.1

Feature	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	57.0^[1]	57.0^[1]	52.0 (52.0)^[2]	No support^[3]	44	10.3

[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0.

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), defaulting to false. Since Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) it is enabled by default.

[3] Internet Explorer and Edge implement an older version of the specification, which doesn't define this property.

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.