JSFiddle - React, Tailwind, and code Playground

by shs400

HTML

<div class="grid-container">
  <div class="item header">1</div>
  <div class="item main">2</div>
  <div class="item footer">3</div>
  <div class="item test">4</div>
  <div class="item test">5</div>
  <div class="item test">6</div>
  <div class="item test">7</div>
  <div class="item test">8</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 50px);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-flow: row dense;
}

.grid-container > * { 
    background-color: mediumseagreen;
}

.item:nth-child(2) {
  grid-column: span 3;
}

.item:nth-child(6) {
  grid-column: span 3;
}