CSS grid-area attribute

Definition and Usage

grid-area property, the size of the grid item, and its position in the grid layout, which is a shorthand for the following properties:

The grid-area property can also be used to assign names to grid items. Then, you can access the grid container's grid-template-areas Refer to the grid items named by attributes. See the following examples.

See also:

CSS Tutorial:CSS Grid Layout

Instance

Example 1

Make "item1" start at row 2, column 1, and span two rows and three columns:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

Try it yourself

Tip:More examples are provided at the bottom of the page.

CSS Syntax

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Attribute Value

Value Description
grid-row-start Specify the row from which the item is displayed.
grid-column-start Specify the column from which the item is displayed.
grid-row-end Specifies where to stop displaying the item at a row line, or how many rows to span.
grid-column-end Specifies where to stop displaying the item at a column line, or how many columns to span.
itemname Specifies the grid item of the grid item.

Technical details

Default value: auto / auto / auto / auto
Inheritance: No
Animation creation: Supported. See:Animation-related properties.
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridArea="1 / 2 / span 2 / span 3"

More examples

Example 2

Item1 is named 'myArea' and spans all five columns in a five-column grid layout:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

Try it yourself

Example 3

Make 'myArea' span two columns in a five-column grid layout (dots represent items without names):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
}

Try it yourself

Example 4

Make 'item1' span two columns and two rows:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

Try it yourself

Example 5

Name all items and create a ready-made web template:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

Try it yourself

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44