CSS grid-area Property

Description

The grid-area property gives the element a name that can be referenced when defining the grid template created using the grid-template-areas property. It is a shorthand property for the following properties: grid-row-start, grid-row-end, grid-column-start and grid-column-end.

Initial value: See individual properties
Applies to: Grid items and absolutely-positioned boxes whose containing block is a grid container
Inherited: No
Media: Visual
Computed value: See individual properties
Animatable: Yes
CSS Version: CSS3
JavaScript syntax: object.style.gridArea

Syntax

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end |  itemname

Values

grid-row-startSee grid-row-start CSS property for values.
grid-column-startSee grid-column-start CSS property for values.
grid-row-endSee grid-row-end CSS property for values.
grid-column-endSee grid-column-end CSS property for values.
itemnameSpecifies the name of the grid item.

Example

HTML

<div class="grid-container">

   <div class="item-a">A</div>

   <div>B</div>

   <div>C</div>

   <div>D</div>

   <div>E</div>

   <div>F</div>

   <div>G</div>

   <div>H</div>

</div>

<div class="grid-container2">

   <div>A</div>

<div class="item-b">B</div>

   <div>C</div>

   <div>D</div>

   <div>E</div>

   <div>F</div>

   <div>G</div>

   <div>H</div>

</div>

CSS

.grid-container,
.grid-container2 {
   display: grid; 
   margin-top: 5px;
   padding: 10px;
   background: rgb(0,150,208);
   grid-template-rows: [row1] 30px  [row2] 30px  [row3] 30px  [row4] 30px; 
   grid-template-columns: [column1] 25%  [column2] 25%  [column3] 25%  [column4] 25%; 
}
.grid-container > div,
.grid-container2 > div { 
   background: rgb(241,101,41); 
   border: 1px solid #000;
   text-align: center; 
} 
.item-a {
   grid-area: 1 / 3 / 5; 
   background: red !important; 
}
.item-b {
   grid-area: row2 / span 4 / row4; 
   background: yellow !important; 
}

Result