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 | |||||
 |
 |
 |
 |
 |
 |
| X | 16 | 57 | 52 | 44 | 10.1 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 57 | 57 | 52 | 43 | 10.3 | 6.0 |
