<div class="grid">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
</div>

$color-list: #b03532 , #33a8a5, #30997a,#6a478f,#da6f2b, #89afe8;

body {
  padding-top: 20px;
  background: #f5f7f8;
}
div {
  color: white;
  font-size: 20px;
  padding: 20px;
}
.grid {
  display: grid;
  grid-template-columns: 150px 20px  300px 20px 150px;
  grid-template-rows: 100px 20px 100px 20px 50px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;

  @for $i from 1 through length($color-list) {
    div:nth-child(#{$i}){
      background: nth($color-list, $i);
    }
  }
}

.item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.item-2 {
  grid-column: 3 / 4;
  grid-row: 1 / 4;
}
.item-3 {
  grid-column: 5 / 6;
  grid-row: 1 / 2;
}

.item-4 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.item-5 {
  grid-column: 5 / 6;
  grid-row: 3 / 4;
}

.item-6 {
  grid-column: 1 / 6;
  grid-row: 5 / 6;
}