This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

grid-template-areas

Summary

Specifies named grid areas which are not associated with any particular grid item, but can be referenced from the grid-placement properties. The syntax of the grid-template-areas property also provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand.

Overview table

Initial value
none
Applies to
Grid containers
Inherited
No
Media
visual
Computed value
As specified
Animatable
No

CSS Object Model Property
:

Percentages
N/A

Syntax

  • grid-template-areas: <string>
  • grid-template-areas: none

Values

none
The grid container does not define any named grid areas.
<string>
A row is created for every separate string listed, and a column is created for each identifier or period (“.”) in the string. A period represents an unnamed area in the grid container. An identifier creates a named grid area with the identifier as its name.

Examples

/*
Creates a page layout where areas are defined for header content (head),
navigational content (nav), footer content (foot), and main content (main).
Accordingly, the template creates three rows and two columns, with four named grid areas.
The head area spans both columns in the first row of the grid.
*/

<style type="text/css">
  #grid {
    display: grid;
    grid-template-areas: "head head"
                         "nav  main"
                         "foot .   "
  }
  #grid > header { grid-area: head; }
  #grid > nav    { grid-area: nav; }
  #grid > main   { grid-area: main; }
  #grid > footer { grid-area: foot; }
</style>

Related specifications

W3C Grid Layout Module
W3C Working Draft