JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
    <div class="column three"></div>
    <div class="column two"></div>
    <div class="column two"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>    
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 15px;
  height: 50vh;
}

div.column:nth-child(1) {
  grid-column: 1 / span 3;
  background-color: gray;
}

div.column:nth-child(2) {
  grid-column: -5 / span 2;
  background-color: gray;  
}
div.column:nth-child(3) {
    grid-column: -3 / span 2;
    background-color: gray;
}
.grid > div {
  background-color: lightgray;
  grid-row: 1;
}