<div class="grid">
  <div class="cell"><div class="cell-in">1</div></div>
  <div class="cell"><div class="cell-in">2</div></div>
  <div class="cell"><div class="cell-in">3</div></div>
  <div class="cell"><div class="cell-in">4</div></div>
  <div class="cell"><div class="cell-in">5</div></div>
  <div class="cell"><div class="cell-in">6</div></div>
  <div class="cell"><div class="cell-in">7</div></div>
</div>

.grid {
  display: grid;
  padding: 1rem;
  grid-gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr 1.5fr;
}

.cell {
  background: lime;
  position: relative;
}
.cell-in {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.cell:nth-child(1) { grid-column: span 2; grid-row: span 3; }
.cell:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.cell:nth-child(3) { padding-bottom: 100%; }
.cell:nth-child(7) { grid-column: span 4; }