JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="grid__cell"></div>
  <div class="grid__cell"></div>
  <div class="grid__cell"></div>
  <div class="grid__cell grid__cell--foo"></div>
  <div class="grid__cell"></div>
  <div class="grid__cell grid__cell--bar"></div>
  <div class="grid__cell"></div>
  <div class="grid__cell"></div>
  <div class="grid__cell"></div>
  <div class="grid__cell"></div>
  <div class="grid__cell"></div>
  <div class="grid__cell"></div>
</div>

CSS

.grid {
  width: 500px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 40px;
  
  background: red;
}

.grid__cell {
  border: 1px solid black;
}

.grid__cell--foo {
  background: cyan;
}
.grid__cell--bar {
  background: magenta;
}