CSS - grid-template-areas

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




<section id="page">
  <main>Main area</main>


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



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


The grid container doesn’t define any named grid areas.
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>+


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.

Initial valuenone
Applies togrid containers
Computed valueas specified
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Basic support 29.0[1] 40.0 (40.0)[2] No support[3] No support[3] 28.0[1] Nightly build-webkit
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support No support No support[3] No support No support

[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  


Specification Status Comment
CSS Grid Layout
The definition of 'grid-template-areas' in that specification.
Working Draft Initial definition


© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

CSS CSS Grid CSS Property Reference