grid-area

A property used to identify an element within a grid template or specify the location of an element within a grid.

Syntax

.item-one {
  grid-area: <area-value>;
}

A <area-value> can be any of the following:

• Grid keyword: auto, span
• Grid line value: 2
• Grid line name: section-a-start
• A string: 'header'

Values for a location can also be specified as:

.item-one {
  grid-area: row-start / column-start / row-end / column-end;
}

Example 1

A div named banner which may be referenced within grid-template-areas:

#banner-div {
  grid-area: banner;
}

Example 2

Text that occupies the second and third rows on the fifth column of the grid:

#text {
  grid-area: 2 / 5 / 4 / 6;
}