<h1>The Order property - GRID</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: auto auto auto;
    }
   .grid-child{
     color: #000;
    padding: 20px;
    margin: 5px;
  font-size: 30px;
  text-align: center;
   }
   .grid-child-1{
        background-color:#A6E7FF;
        order: 3;
   }
 .grid-child-2{
        background-color: #FFDDD3;
  order: 5;
   }
   .grid-child-3{
        background-color: #E6D0F7;
     order: 4;
   }
   .grid-child-4 { 
       background-color: #C8F1D6;
     order: 6;
     }
.grid-child-5 { 
    background-color: #C3CDE6;
  order: 2;
 }
.grid-child-6 {
    background-color: #E6D0F7;
  order: 1;
 }

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