JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="el">1</div>
  <div class="el">2</div>
  <div class="el">3</div>
  <div class="el b">5</div>
  <div class="el a">4</div>
  <div class="el c">6</div>
  
   <div class="el">7</div>
  <div class="el">8</div>
  <div class="el">9</div>
  <div class="el b">10</div>
  <div class="el a">11</div>
  <div class="el c">12</div>
</div>

CSS

.wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 20px;
  grid-template-areas:
    ". . a"
    "b . a"
    "b c c";
}

.el {
  border: 1px solid #000;
  padding: 20%;
}

.b { grid-area: b; }
.a { grid-area: a; }
.c { grid-area: c; }