JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="grid">
  <div class="a">1</div>
  <div class="b">2</div>
  <div class="a">3</div>
  <div class="b">4</div>
  <div class="b">5</div>
  <div class="a">6</div>
  <div class="a">7</div>

</div>

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  grid-gap: 1em;
  grid-auto-flow: row dense;
}

.grid>* {
  background: #c9c9c9;
  color: black;
  text-align: center;
}

/*
.grid> :nth-child(1),
.grid> :nth-child(4),
.grid> :nth-child(7) {
  grid-area: 1 / 1;
}

.grid> :nth-child(2),
.grid> :nth-child(5) {
  grid-area: 1 / 2;
}

.grid> :nth-child(3),
.grid> :nth-child(6) {
  grid-area: 1 / 3;
}
*/
.a {
  height: 4em;
}

.b {
  height: 2.45em;
}