CSS grid-template-areas Property

Description

The grid-template-areas property determines the grid layout template, referring to the names of the element areas that are set using the grid-area property.

Initial value: none
Applies to: Grid containers
Inherited: No
Media: Visual
Computed value: As specified
Animatable: Yes
CSS Version: CSS3
JavaScript syntax: object.style.gridTemplateAreas

Syntax

grid-template-areas : none | <string>+

Values

noneThe container does not define named areas of the grid layout. The default value.
<string>A row is created for every separate string listed, and a column is created for each cell in the string. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.

Example

HTML

<div class="grid-container">

   <div class="item-a">Header</div>

   <div class="item-b">Main</div>

   <div class="item-c">Footer</div>

   <div class="item-d">Navigation</div>

</div>

CSS

.grid-container {
   display: grid;
   margin-top: 5px;
   padding: 10px;
   background: rgb(0,150,208); 
   grid-template-rows: 30px 30px 30px 30px;
   grid-template-columns: 25% 25% 25% 25%;
   grid-template-areas: 'header header header header' 
                                             'nav main main .' 
                                              'nav main main .'
                                              'footer footer footer footer'; 
}
.grid-container > div { 
   background: rgb(241,101,41);
   border: 1px solid #000;
   text-align: center; 
} 
.item-a {
   grid-area: header;
   background: red !important;
}
.item-b {
   grid-area: main; 
   background: yellow !important; 
}
.item-c {
   grid-area: footer;
   background: green !important; 
}
.item-d {
   grid-area: nav;
   background: violet !important;
}

Result