JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="wide"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-3"></div>
  <div class="row-3"></div>
  <div class="row-3"></div>
  <div class="row-4"></div>
  <div class="row-4"></div>
  <div class="row-4"></div>
</div>

CSS

.grid{
  display: grid;
  grid-template-columns: auto 25% 25%;
  grid-template-rows: auto auto auto;
  width 100%;
  margin: 20px;
  grid-column-gap: 40px;
  /* grid-row-gap: 40px 60px; */
  
}

div{
  background: #838383;
  height: 80px;
}

.wide{
  grid-column: 1 / span 3;
  margin-bottom: 5px;
}

.row-2{
  background: green;
  margin-bottom: 10px;
}

.row-3{
  background: blue;
  margin-bottom: 30px;
}

.row-4{
  background: red;
  margin-bottom: 20px;
}