section div {
  background-color: peachpuff;
  padding: 10px;
  border: 1px solid #000;
}

.grid1 {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 50px;
  grid-auto-rows: 100px;
}

.grid2 {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 50px 100px;
  grid-auto-rows: 200px;
}

.grid3 {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 30px 50px;
  grid-auto-rows: 75px 100px;
}

.grid4 {
  display: grid;
  grid-template-columns: 50px 100px;
  grid-template-rows: 100px 100px;
  grid-auto-columns: 50px 100px;
  grid-auto-flow: column;
}

.grid5 {
  display: grid;

  /*This is the initial layout*/
  grid-template-columns: 70px 120px;

  /*each child will be filled with rows first*/
  grid-template-rows: 50px 100px 100px;

  /*the subsequent columns will take the below format*/
  grid-auto-columns: 200px 500px;
  grid-auto-flow: column;
}

.grid6 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;

  /* dens accomodates the empty space by filling item 3 */
  grid-auto-flow: row dense;
}

.grid6 .item1 {
  grid-column: span 2;
}

.grid6 .item2 {
  grid-column: span 2;
}