Skip to main content

grid-template-areas Property in CSS Grid Layouts

grid-template-areas specify the area where you want to place named grid items within a grid container.

note

We use the CSS grid-area property to name grid items.

Example 1: Place the Named Grid Item across Three Columns

.grid-item1 {
grid-area: firstDiv;
}

section {
display: grid;
grid-template-areas: "firstDiv firstDiv firstDiv . .";
background-color: orange;
margin: 50px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the grid-template-areas property to place grid-item1 across the first three column areas.

Note the following:

  • Quotation marks ("") define each grid row.
  • A period symbol (.) defines an unnamed grid item.
  • We used the whitespace character to separate grid columns.

Example 2: Specify the Named Grid Items' Placements

.grid-item1 {
grid-area: header;
}

.grid-item2 {
grid-area: article;
}

.grid-item3 {
grid-area: footer;
}

.grid-item4 {
grid-area: sidebar;
}

.grid-item5 {
grid-area: ads1;
}

.grid-item6 {
grid-area: ads2;
}

.grid-item7 {
grid-area: ads3;
}

section {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-template-areas:
"header header header header header"
"sidebar article article article ads1"
"sidebar article article article ads1"
"sidebar article article article ads1"
"sidebar article article article ads2"
"sidebar article article article ads3"
"sidebar footer footer footer footer";
background-color: orange;
margin: 30px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the grid-template-areas property to specify where browsers should place the grid items across the rows and columns of the grid container.

Important Stuff to Know about the grid-template-areas Property

Here are four essential pieces of information to remember when using the grid-template-areas property:

1. No vacant cells allowed

The grid-template-areas property requires you to provide an item for all grid cells.

For instance, consider this snippet:

grid-template-areas:
"header header"
"sidebar article article article ads1"
"sidebar article article article ads1"
"sidebar article article article ads1"
"sidebar article article article ads2"
"sidebar article article article ads3"
"sidebar footer footer footer footer";

Above is an invalid grid-template-areas value because the first row is incomplete.

In other words, the first row is the only one with two columns. However, grid-template-areas expect all the rows in a grid container to have the same number of columns.

2. Use dots to specify empty cells

Suppose you wish to leave some cells empty. In that case, use a dot (.) or multiple unspaced dots (...).

Here's an example:

grid-template-areas:
"header header . . ."
"sidebar article article article ads1"
"sidebar article article article ads1"
"sidebar article article article ads1"
"sidebar article article article ads2"
"sidebar article article article ads3"
"sidebar footer footer footer footer";

Try it on StackBlitz

The snippet above used the dot (.) symbols to indicate three empty cells.

3. No multiple placements

The grid-template-areas property cannot place items twice within a grid container.

For instance, consider this snippet:

grid-template-areas:
"header header header header header"
"sidebar article article article ads1"
"sidebar article article article ads1"
"sidebar article article article ads1"
"sidebar article article article ads2"
"sidebar article article article ads3"
"sidebar footer header header header";

Above is an invalid grid-template-areas value because the header item occupies two grid areas.

4. Only rectangular areas allowed

The grid-template-areas property cannot create non-rectangular areas (such as T-shaped or L-shaped).

For instance, consider this snippet:

grid-template-areas:
"header header header header header"
"sidebar ads1 ads1 ads1 ads1"
"sidebar article article article ads1"
"sidebar article article article ads1"
"sidebar article article article ads2"
"sidebar article article article ads3"
"sidebar footer footer footer footer";

Above is an invalid grid-template-areas value because the ads1 item creates a non-rectangular grid area.

Buy your CSS Flexbox Explained Visually book on Amazon

Overview

This article discussed what a CSS grid-template-areas property is. We also used examples to see how it works.

Find all your favorite books at booksamillion.com.