CSS grid-area 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-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