JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div id="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 400px;
  width: 400px;
  
}

.item:nth-child(2n-1) {
  background: red;
  grid-area: test;
}