JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

CSS

.grid {
  display: flex;
  flex-wrap: wrap;
}

.item {
  box-sizing: border-box;
  flex-basis: 25%;
  height: 100px;
  border:5px solid white;
  background: gray;
}

.item:nth-child(1),
.item:nth-child(5) {
  flex-basis: 50%;
}
.item:nth-child(5) {
  margin-right: 25%;
}
.item:nth-child(9){
  height: 200px;
  margin-top: -100px;
}

/* Или на гридах */
@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "a a b c"
    "d e e i" 
    "f g h i";
  }
  .item:nth-child(1) { grid-area: a; }
  .item:nth-child(2) { grid-area: b; }
  .item:nth-child(3) { grid-area: c; }
  .item:nth-child(4) { grid-area: d; }
  .item:nth-child(5) { grid-area: e; margin: 0; }
  .item:nth-child(6) { grid-area: f; }
  .item:nth-child(7) { grid-area: g; }
  .item:nth-child(8) { grid-area: h; }
  .item:nth-child(9) { grid-area: i; margin: 0; }
}