<div class="grid-container">
  <div class="item1 inner">1) Col 1 row 1<br>
    test<br>
    test<br>
    test</div>
  <div class="item2 inner">2) Col 1 row 2</div>
  <div class="item3 inner">3) Col 1 row 3<br>test<br>
    test</div>
  <div class="item4 inner">4) Col 2 row 1</div>
  <div class="item5 inner">5) Col 2 row 2<br>test<br>test</div>
  <div class="item6 inner">6) Col 2 row 3</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: minmax(100px, 50%) minmax(100px, 50%);
  /* grid-template-rows:1fr 1fr 1fr;*/
  grid-template-areas:
    "grid1 grid2"
    "grid3 grid4"
    "grid5 grid6";
  grid-gap: 10px;
  background-color: #2196f3;
  padding: 10px;
  justify-content: center;
}
.grid-container > div {
  text-align: center;
  font-size: 30px;
}
.item1 {
  grid-area: grid1;
}
.item2 {
  grid-area: grid3;
}
.item3 {
  grid-area: grid5;
}
.item4 {
  grid-area: grid2;
}
.item5 {
  grid-area: grid4;
}
.item6 {
  grid-area: grid6;
}
.inner {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.