CSS grid-area Property

CSS grid-area property defines the size and position of a grid item in a grid layout using the grid lines. It is a shorthand of the following properties:

It uses the below syntax to define item’s size and position:

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

The code in the example below shows that the item1 starts on row-line 1, column-line 1, and ends on row-line 3, column-line 3. Try it out:

Example:

#item1{
  grid-area: 1 / 1 / 3 / 3;
}

We can also use the span keyword to specify how many rows or columns a grid item should span in the layout.

The code in the example below shows that the item1 starts on row-line 1, column-line 1 and spans next 3 rows and 2 columns.

Example:

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

Grid Area Name

The grid-area property can also be used to define a name to the grid item. This named grid area can then be used to reference that particular item which can later be used with the grid-template-areas property to make the grid layout easier.

The code in the example below first assigns a name ‘header’ to the item1. This named grid area i.e. ‘header’ is then used with the grid-template-areas property.

The grid-template-areas: 'header header header header' represents that the item1 will span 4 columns in the grid layout.

Example:

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

The grid items with no grid area name can also be used with a named grid item. A period sign(.) is used to represents a grid item with no name.

The code in the example below represents that the item with grid-area name ‘header’ i.e. item1 will span two columns and then two grid items with no name will be placed just next to it. Here, each period sign(.) represents an item with no name.

Example:

#item1{
  grid-area: header;
}

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

It is also possible to create multiple rows using the named grid items. Here, each single quote('') represents a row. The row items are put inside these single quotes('') and the rows are separated by white space or newline. Try out the example below:

Example:

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

Creating a Website Layout

In the example below, we have created a website layout using named grid items.

Example:

#item1{ grid-area: header;}
#item2{ grid-area: sidebar;}
#item3{ grid-area: main;}
#item4{ grid-area: footer;}

.grid-container{
  grid-template-areas: 
    'header header header header'
    'sidebar main main main'
    'footer footer footer footer';
                     
       
}

CSS Syntax

The grid-area property has the below syntax:

grid-area: grid-row-start grid-column-start grid-row-end grid-column-end|itemname|initial|inherit;

Property Values

The grid-area property accepts the following values:

grid-row-startDefines on which row-line a grid item should start.
grid-column-startDefines on which column-line a grid item should start.
grid-row-endDefines on which row-line a grid item should end.
grid-column-endDefines on which column-line a grid item should end.
initialSets the grid-area property to its default value.
inheritInherits the grid-are property from the parent element.

General Info

Default Valueauto/auto/auto/auto
InheritedNo
JavaScript Usageelement.style.gridArea = “1 / 1 / 3 / 3”