In this section, we will learn what the grid-template-areas property is and how to use it in CSS.

Click here to run the example of grid-template-areas property.

CSS grid-template-areas Property Definition and Usage

CSS provided a property named `grid-template-areas` by which we can compartmentalize a grid and then place each grid-item into these compartments.

Basically, with the `grid-template-areas` property, we’re turning a grid into multiple areas using a naming convention. Then use these names to place grid items there.

Essentially, each grid item takes one of these areas.

Each compartment can encompass one or multiple grid-cells, but the end result should be a rectangular area.

For example, let’s say you have a grid like the one in the picture below:

Now, depending on our design and needs, there are many areas we can take out from this grid by compartmentalizing it, but as mentioned before, at the end, each area should be in a rectangular shape like:

CSS grid-template-areas Property Syntax

grid-template-areas: none|”grid-area-one” “grid-area-two” “grid-area-n”;

CSS grid-template-areas Property Value

The default value of this property is “none” which means there shouldn’t be any grid area for the target grid.

But here’s how we can turn a grid into multiple areas:

First of all, each double quotation you put as the value of the `grid-template-areas` property represents one row of your target grid.

So if, for example, your grid contains 3 rows and you want to use these rows in your areas, then you need to add three double-quotations as the value of this property.

Note: each area (double quotation) is separated from the other via a white space.

Now, let’s see the content within each double quotation (each area):

In short, the content of each double quotation are names for columns of a row that the double quotation is representing it.

Note: each name is separated from the other by a white space.

For example, let’s say your target grid has 3 columns and 3 rows!

First, let’s see the final result of creating multiple areas of such grid and then we will explain what happened here:

grid-template-areas:

"head head head"

"side main main"

"side main main";

In this example, there are 3 double quotations set as the value of the `grid-template-areas` property, and each of them represents one row of the target grid.

Now there are three names in each double quotation. Each of these names represents parts of an area.

For example, the values of the first row are: “head head head”.

This means the first column of the grid belongs to an area that is called “head”. The second and third columns of the first row are also named “head” and this means these two columns are also part of the area that is called “head”.

Now moving to the second row, we have these values: “side main main”.

Here the name tells us that the first column of the second row belongs to an area that is called “side”. However, the second and third columns of the second row are named “main” and that means these two columns belong to an area that is called “main”.

Now moving to the values of the last row: “side main main”.

Basically, the values of the last row are the same as the second row. So it means the first column of this row belongs to an area that is called “side” and the second and third columns belong to an area that is called “main”.

That’s how we’ve turned a grid into multiple areas!

In short: we need to specifically tell browsers that each cell of a grid belongs to what area! So by naming convention that we used inside each double-quotation, we’re exactly doing that.

Note: later in this section, we will see how to skip a cell of a grid to not be part of any area.

Example: grid-template-areas property in CSS

See the Pen grid-template-areas property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Note: we used `grid-area` property in order to position each grid-item in a specific area.

If we want to exclude one or more grid-cells, we can use dot “.” instead of a name for that cell.

Example: excluding grid cells in CSS grid-template-areas property

See the Pen excluding grid cells in CSS grid-template-areas property by Omid Dehghan (@enjoytutorials1) on CodePen.

As you can see here, the head area is limited to just one cell because we’ve excluded the other two cells next to the head area by using dots instead of a name for them.