<h1>The grid-template-rows Property</h1>
<!--         <div class="icon">&#8595;</div> -->
        <div class="main-div">
            <div class="grid-parent">
                <div class="grid-child grid-child-1">1</div>
                <div class="grid-child grid-child-2">2</div>
                <div class="grid-child grid-child-3">3</div>
                <div class="grid-child grid-child-4">4</div>
                <div class="grid-child grid-child-5">5</div>
                <div class="grid-child grid-child-6">6</div>
            </div>
        </div>
    *{
     font-family: 'Exo 2', sans-serif;
     padding: 0;
     margin: 0;
    }
    h1{
        font-size:30px;
        text-align: center;
        margin-bottom: 30px;
        margin-top: 20px;
    }
    h2{
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        padding: 10px;margin-bottom: 20px;

    }
    .main-div{
      width: 950px;
      height: auto;
    border: 5px solid #70409F;
      padding: 10px;
      margin: 0 auto;
    }
    .grid-parent{
      display:grid;
      grid-template-columns: 400px 300px auto;
      grid-template-rows: 150px 300px;
    }
   .grid-child{
     color: #000;
    padding: 20px;
    margin: 5px;
  font-size: 30px;
  text-align: center;
   }
         .grid-child-1{
       background-color:#A6E7FF;
   }
   .grid-child-2{
        background-color: #FFDDD3;
   }
   .grid-child-3{
        background-color: #E6D0F7;
   }
   .grid-child-4{
       background-color: #C8F1D6;
   }
   .grid-child-5{
       background-color: #C3CDE6;
   }
   .grid-child-6{
       background-color: #ffd1b0;
   }
   .icon {
    text-align: center;
    font-size: 25px;
    margin-bottom: 5px;
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Exo+2:wght@300&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.