<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(6, 1fr);
  grid-auto-rows: 100px;
  gap: 20px;
  border: 2px solid white;
  flex: 1 1 auto;
  margin: 20px;
  padding: 20px;
  counter-reset: grid;
}

.item {
  background: #AB47BC;
  padding: 20px;
  grid-column: span 2;
    
  &::after {
    counter-increment: grid;
    content: counter(grid);
  }

  /* Dealing with 2 orphan items */
  &:last-child:nth-child(3n - 1) {
    grid-column-end: -2;
  }
  
  &:nth-last-child(2):nth-child(3n + 1) {
    grid-column-end: 4;
  }

  /* Dealing with single orphan */
  &:last-child:nth-child(3n - 2) {
    grid-column-end: 5;
  }
}

.grid--2 {
  .item {
    background: #D4E157;
  }
}