<div class="wrapper">
  <div class="grid grid--1">
    <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>

  <div class="grid grid--2">
    <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>
</div>

* {
  box-sizing: border-box;
}

body {
  background: #212121;
  padding: 20px;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  gap: 20px;
  border: 2px solid white;
  flex: 1 1 auto;
  margin: 20px;
  padding: 20px;
  counter-reset: grid;
  
  .item {
    padding: 20px;
    
    &::after {
      counter-increment: grid;
      content: counter(grid);
    }
    
    &:last-child:nth-child(3n - 1) {
      grid-column: span 2;
    }
    
    &:last-child:nth-child(3n - 2) {
      grid-column: span 3;
    }
  }
}

.item {
  background: #E91E63;
}

.grid--2 {
  .item {
    background: #26C6DA;
  }
}