grid-template-areas

The grid-template-areas property designates areas within a grid layout.

Syntax

The grid-area property is used to name grid items, which can then be referenced by name in the grid-template-areas property. Areas are defined by apostrophes, and a period is used to refer to a grid item with no name.

.area1 {
  grid-area: exampleArea;
}

.container {
  display: grid;
  grid-template-areas: "exampleArea exampleArea . .";
}

Values

none
Default value. There will be no named grid areas.

itemnames
A sequence that designates how each of the columns and rows should display.

Browser Compatibilty

Demos

Have a code example of grid-template-areas? Submit a codepen.io demo and we'll showcase it here ↴