CSS Grid Item

CSS Grid Item


Grid item
All immediate children of the grid container are grid items. Beyond the immediate children, descendant elements are not grid items. 
No special CSS properties need to be applied to make an item a grid item. 
The child elements automatically become grid items, and by default they are laid out in the order that they appear in the HTML markup.
Now we will see some properties with Example -
  • Grid-column
  • Grid-row -
Both are defined below -
You can override the default grid positioning and specify specific grid row and column indices for grid items using the grid-row and grid-column properties. 
Row and column numbers start at 1.
Example - Specifying the row and column for an item
.item1 {
background: skyblue;
grid-row: 2;
grid-column: 3;
}
 

 
Output - 

 
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 - 
Example -
<!DOCTYPE html>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>

<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>
</div>

</body>
</html>


 
Output -
Changing Order of the Items
Example - Grid-area property can be used for that purpose -
<!DOCTYPE html>
  <html>
  <head>
  <style>
  .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;
  }

  .item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
  </style>
  </head>
  <body>

  <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>
  </div>

  </body>
  </html>

 
Output