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

Example

<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>
.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; 
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
X1657524410.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
5757524310.36.0