CSS grid-template-areas Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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