CSS grid-template-areas Property

CSS grid-template-areas property is used to define different blocks/sections in a grid layout with the help of named grid areas.

The grid-template-areas property accepts one or more strings as a value. Where each string(enclosed in single quotes) represents a row in the grid layout. Each string contains named or no-named grid items.

A grid item is named using the grid-area property.

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 code grid-template-areas: 'header header header header' represents that the grid item with name ‘header’ will span 4 columns in the layout.

Example:

#item1{
  grid-area: header;
}

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

The grid items with no name can also be used with named grid items. A period sign(.) is used to represent 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 string(enclosed in single quotes) represents a row. The row items are put inside these single quotes('') and the rows are separated by white space or newline.

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. Try it out to see how it works:

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-template-areas property has the below syntax:

grid-template-areas: none|string(s);

Property Values

The grid-template-areas property accepts the following values:

General Info