CSS grid-area Property

CSS grid-area Property

CSS grid-area Property

This is used as shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.

Syntax -

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

Now we will see the values with their descriptions :




This specifies on which row to start displaying the item.


This specifies on which column to start displaying the item.


This specifies how many rows to span.


This specifies how many columns to span.

Now we will see the example -

Example -

<!DOCTYPE html>
.container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #e3f967;
  padding: 10px;

.container > div {
  background-color: rgb(181, 125, 237);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;

.item8 {
  grid-area: 1 / 2 / 5 / 6;

<h1>The grid-area Property</h1>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div> 
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div> 
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item15">16</div>
  <div class="item15">17</div>
  <div class="item15">18</div>
  <div class="item15">19</div>
  <div class="item15">20</div>
  <div class="item15">21</div>



Output -