<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: 200px 200px;
  grid-auto-columns: 100px;
  grid-template-rows: auto;
  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:foo;
  grid-row: 1;
}
.item-2 {
  grid-column: 2 / span 2 foo;
  grid-row: 2;
}
.item-3 {
  grid-column: -1 foo;
  grid-row: 3;
}

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

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

.item-6 {
  grid-column: 1; 
  grid-row: 3;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.