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

<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>
.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;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
X1657524410.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
5757524310.36.0