<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 200px;
  gap: 20px;
  counter-reset: item;
}

.item {
  counter-increment: section;
  background: red;
  padding: 20px;
  
  &::after {
    content: counter(section);
  }
  
  &:nth-child(2n - 1) {
    grid-column: 3 / span 2;
    grid-row: span 2;
    background: skyBlue;
  }
  
  &:nth-child(4n - 1) {
    grid-column: 1 / span 2;
    grid-row: span 2;
    background: blue;
  }
}