CSS - grid-template-areas

Example

<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;
}

Syntax  

/* 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;

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 <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/string" title=""><string></a><a href="css/value_definition_syntax#plus_(.2b)" title="Plus">+</a>

Description  

The grid-template-areas CSS property specifies named grid areas.

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.

Browser Compatibility  

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

[2] Implemented behind the preference layout.css.grid.enabled, defaulting to false.

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

See Also  

• Related CSS properties: grid-template-rows, grid-template-columns, grid-template

Specifications  

License