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

Browser Support

Desktop

X	16	57	52	44	10.1

Tablets / Mobile

57	57	52	43	10.3	6.0

Last updated by CSSPortal on: 6th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu