JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="gi gi-2-2">A 2-2</div>
  <div class="gi gi-1-1">B 1-1</div>
  <div class="gi gi-1-1">C 1-1</div>
  <div class="gi gi-2-1">D 2-1</div>
  <div class="gi gi-1-3">E 1-3</div>
  <div class="gi gi-3-1">F 3-1</div>
  <div class="gi gi-1-1">G 1-1</div>
  <div class="gi gi-3-3">H 3-3</div>
  <div class="gi gi-2-2">I 2-2</div>
  <div class="gi gi-3-1">J 3-1</div>
  <div class="gi gi-1-1">K 1-1</div>
  <div class="gi gi-1-2">L 1-2</div>
  <div class="gi gi-1-1">M 1-1</div>
  <div class="gi gi-1-1">N 1-1</div>
  <div class="gi gi-1-1">O 1-1</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(50px, auto);
  grid-auto-flow: dense;
}

.gi {
  background: #e0e0e0;
}
.gi-1-2 { grid-row: span 2 }
.gi-1-3 { grid-row: span 3 }
.gi-2-1 { grid-column: span 2 }
.gi-2-2 { grid-column: span 2; grid-row: span 2 }
.gi-3-1 { grid-column: span 3 }
.gi-3-3 { grid-column: span 3; grid-row: span 3 }