CSS grid-template-areas Property

The grid-template-areas property in CSS is used to specify the area within the grid layout. The named grid area can be rendered on the screen based on the sequence of values of the grid-template-areas property.

The grid-template-areas property specifies areas within the grid layout.

You can name grid items by using the grid-area property, and then reference to the name in the grid-template-areas property.

CSS Syntax

grid-template-areas: none|itemnames;

Property Values:

none: It is the default value and it does not contains grid named areas.
itemnames: It is the sequence of grid area names in the form of row and columns.

Note:

Each area name is separated by a space.
Each row is contained within single quote ‘ ‘.
There is a semicolon at the end of the declaration only.
Period represents items with no names.

Supported Browsers:

Firefox: 52.0, 2.0 -moz-
Google Chrome: 50.0, 4.0 -webkit-
Internet Explorer: 10.0
Safari: 9.0, 3.1 -webkit-
Opera: 37.0, 15.0 -webkit-, 11.1

Example -

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
  'header header header header header header'
  'menu main main main right right'
  'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>A Webpage Template</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>
<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>
<p>This grid layout contains six columns and three rows:</p>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>
</html>