<div class="grid">
  <div class="item">
    <div class="subgrid-item-pink"></div>
  </div>
  <div class="item">
    <div class="subgrid-item-blue"></div>
    <div class="subgrid-item-small"></div>
  </div>
  <div class="item">
    <div class="subgrid-item-small">
    </div>
  </div>
  <div class="item">
    <div class="subgrid-item-pink"></div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(auto, 20vw) repeat(
      2,
      minmax(0, 20vw)
    ) minmax(auto, 10vw) minmax(0, 0.5fr);
  grid-auto-rows: minmax(50vh, auto);
}

.item {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: span 3;
  grid-row: span 2;

  .subgrid-item-pink {
    background: pink;
  }

  .subgrid-item-blue {
    background: lighten(blue, 25%);
  }

  &:nth-child(even) {
    .subgrid-item-small {
      grid-column: 2;
      grid-row: 2;
      align-self: flex-start;
    }
  }

  &:nth-child(3n) {
    background: lighten(red, 45%);
  }
}

.subgrid-item-small {
  background: lighten(blue, 25%);
  padding: 2em;
}