JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>

CSS

div {
  border: 1px solid black;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container > div {
  min-height: 40px;
}

.item3 {
  grid-row: span 3;
}

.item4 {
  grid-column: span 2;
}

.item5 {
  grid-row: span 3;
}