advanced grid layout with responsiveness

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="main">
      <div class="box1">Box1</div>
      <div class="box2">Box2</div>
      <div class="box3">Box3</div>
    </div>
    
    
  </body>

</html>

// Code goes here

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.main{
  
  border: 1px dashed #999;
  display: grid;

  width: 100%;
  height: 100vh;
  /* grid-template-columns: 1fr 1fr ; */
  /* grid-template-columns: repeat(auto-fill, 300px); */

  grid-template-columns: repeat(auto-fit, minmax(100px,1fr));

   /* fr means it occupies remaining width */
  /* grid-column-gap: 20px;
  grid-row-gap: 20px; */
  
}

.main div{
  width: 100%;
}

.box1{
     background: lightblue; 
     /* grid-row-start:1;
     grid-row-end:3; */
       /* grid-column-start: 1;
     grid-column-end: 3;  */
   /* grid-column: 1/3;   */

}

.box2{
     background: lightcoral; 
      
}

.box3{
     background: lightseagreen; 
    
}