<div class="grid">
  <div class="grid__item">1</div>
  <div class="grid__item">2</div>
  <div class="grid__item">3</div>
  <div class="grid__item">4</div>
  <div class="grid__item">5</div>
  <div class="grid__item">6</div>
  <div class="grid__item">7</div>
  <div class="grid__item">8</div>
</div>

<img src="https://api.monosnap.com/file/download?id=dyusq8nLqGjZZDukq8jjyQiGtq0rQH" alt="">

img {
  max-width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 25px 1fr 0.5fr;
  grid-template-rows: 1fr 1fr 25px 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;

  &__item {
    min-height: 50px;

    &:nth-child(1) {
      grid-area: 1 / 1 / span 3 / span 1;
    }

    &:nth-child(2) {
      grid-area: 4 / 1 / span 2 / span 1;
    }

    &:nth-child(3) {
      grid-area: 1 / 2 / span 2 / span 2;
    }

    &:nth-child(4) {
      grid-area: 3 / 2 / span 3 / span 1;
    }

    &:nth-child(5) {
      grid-area: 1 / 4 / span 2 / span 1;
    }

    &:nth-child(6) {
      grid-area: 3 / 3 / span 2 / span 2;
    }
    
    &:nth-child(7) {
      grid-area: 5 / 3 / span 1 / span 3;
    }

    &:nth-child(8) {
      grid-area: 1 / 5 / span 4 / span 1;
    }
    
    @for $i from 1 through 8 {
      &:nth-child(#{$i}) {
        background-color: hsla(360 * $i / 8, 80%, 60%, 1);
      }
    }
  }
}