<section class="grid-1">
  <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>
</section>
body {
  padding-top: 40px;
  background: #f5f7f8;
}

$bgColors: #b03532 #33a8a5 #30997a #6a478f #da6f2b #3d8bb1;

.grid-1 {
  display: grid;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  grid-template-columns: 300px 200px 100px;
  grid-template-rows: 100px 50px;
  
  div {
  color: white;
  font-size: 20px;
  padding: 20px;

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

.item-1 {
  grid-area: 1 / 1 / 2 / 4;
}
.item-2 {
  grid-area: 2 / 1 / 4 / 2;
}

.item-4 {
  grid-area: 2 /  3 / 4  / 4;
}
.item-6 {
  grid-area: 4 / 1 / 5 / 4;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.