CSS grid-area Property

Description

The grid-area CSS property is used in conjunction with CSS Grid Layout to define the placement and size of grid items within a grid container. It allows you to specify a name for a grid item, which can then be used in conjunction with the grid-template-areas property to define the layout of grid items in a more intuitive and readable way. By assigning a name to a grid item using grid-area, you can easily position it within the grid by specifying the corresponding name within the grid-template-areas property's grid template. This property simplifies grid item placement and is particularly useful for creating complex, responsive layouts with CSS Grid. Individual properties are: 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
Computed value: See individual properties
Animatable: Yes
JavaScript syntax: object.style.gridArea

Interactive Demo

grid-area: a;

grid-area: b;

grid-area: c;

grid-area: 2 / 1 / 2 / 4;

Grid Area

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

Editor