* {
     box-sizing:border-box;
     margin:0;
     padding:0;
     }
 
  .blk{background:#000;}
 
  @media all and (max-width: 500px) {
   .mygrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   grid-column-gap: 3px;
   grid-row-gap:3px;
}

.box{
  background:#57a773;
  padding: 10px 10px 10px;
  color:#fff;
  text-align: center;
  border:1px solid #fff;
}

.bigbox {display: grid;
 grid-column: 1/ span 1;
 background:#000;
  padding: 10px;
  color:#fff;
  text-align: center;
  border:2px solid #fff;
  }

  
  .dblue{
    background:#157145;}

.pur {background:#6a8eae;}



}

  @media all and (min-width: 600px) {
    .mygrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(33%, 1fr));
   grid-column-gap: 3px;
   grid-row-gap:3px;
}

.box {
   background:#57a773;
  padding: 10px 10px 10px;
  color:#fff;
  text-align: center;
  border:2px solid #fff;
}



  .dblue{
    background:#157145;}

.bigbox {display: grid;
 grid-column: 1/ span 3;
 background:#000;
  padding: 10px;
  color:#fff;
  text-align: center;
  border:2px solid #fff;
  }

.pur {background:#6a8eae;}

}