CSS grid-areaProperty


Example

The following example sets "item8" to start at row 2 and column 1, spanning 2 rows and 3 columns:

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

Try it Yourself »

Browser Support

The numbers in the table indicate the first browser version that supports the property.

Property
grid-area 57 16 52 10 44

Property definition and usage instructions

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

The grid-area property can also be used to name grid items.

Named grid items can be referenced by the container'sgrid-template-areasUse the attribute to reference.

Default Value: auto / auto / auto / auto
Inherited: no
animation: Supported.Read Aboutanimatable Try it Yourself
Version: CSS Grid Layout Module Level 1
JavaScript Syntax: object.style.gridArea="1 / 2 / span 2 / span 3" Try it Yourself

Syntax

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

Value Description
grid-row-start Specifies on which row to start displaying the grid item.
grid-column-start Specifies on which column to start displaying the grid item.
grid-row-end Specifies on which row to stop displaying the grid item, or how many rows it spans.
grid-column-end Specifies on which column to stop displaying the grid item, or how many columns it spans.
itemname Specify the grid item name

More Examples

The following example names "item1" as "myArea", and spans five columns:

Example

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

Try it Yourself »

Each line is enclosed within single quotes.' 'Define, separated by spaces.

.The period indicates a grid item with no name.

Example

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

Try it Yourself »

To define two rows, place them within another set of single quotes.' 'Define the columns of the second row.

The following example sets "item1" to span 2 rows and 2 columns:

Example

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

Try it Yourself »

Name all the grid items and create a web page template:

Example

.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 »

Related Articles

CSS Tutorial:CSS Grid Layout

other extensions