CSS grid-template-areas Property

Description

The grid-template-areas CSS property is used in conjunction with the CSS Grid Layout system to define the layout of a grid container's cells in a more intuitive and visual manner. By assigning a series of named grid areas to specific grid items, you can create a grid structure that resembles a "map" of the layout. These named areas are defined within the grid container, and grid items can be placed into these areas using the grid-area property in CSS. This approach makes it easier to design complex grid layouts with clear and readable code, as it abstracts the cell placement into named regions, providing a higher level of organization and flexibility in web page layouts.

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

Interactive Demo

grid-template-areas: 
	"a a a"
	"b c c"
	"b c c";

grid-template-areas: 
	"b b a"
	"b b c"
	"b b c";

grid-template-areas: 
	"a a ."
	"a a ."
	". b c";

One

Two

Three

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

Editor