<h1>The grid-area Property ( Naming Grid )</h1>
       
        <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 class="grid-child grid-child-7">7</div>
                <div class="grid-child grid-child-8">8</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: 300px auto auto auto auto;
      grid-template-areas: 'cyan-1 cyan-1 cyan-1 cyan-1 blue-5 yellow-7  darkpink-6 darkpink-6 darkpink-6 peach-2 peach-8 green-4 pink-3 . .';
    }
   .grid-child{
     color: #000;
    padding: 20px;
    margin: 5px;
  font-size: 30px;
  text-align: center;
   }
   .grid-child-1{
       background-color:#A6E7FF;
  grid-area: cyan-1;
   }
   .grid-child-2{
        background-color: #FFDDD3;
     grid-area: peach-2;
     
   }
   .grid-child-3{
        background-color: #E6D0F7;
     grid-area: pink-3;
   }
   .grid-child-4{
       background-color: #C8F1D6;
     grid-area: green-4;
     
   }
   .grid-child-5{
       background-color: #C3CDE6;
     grid-area: blue-5;
   }
   .grid-child-6{
       background-color: #E694F7;
     grid-area: darkpink-6;
   }
   .grid-child-7{
       background-color: #e9d100;
     grid-area: yellow-7;
     
   }
   .grid-child-8{
       background-color: #ffebcc;
     grid-area: peach-8;
   }

   .icon {
    text-align: center;
    font-size: 25px;
    margin-bottom: 5px;
}