JSFiddle - React, Tailwind, and code Playground

by Mike Jacobson

HTML

<div class="grid">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: [left] auto [mid1] auto [mid2] auto [right];
  grid-template-rows: [top] 1fr [middle] 1fr [bottom];
  grid-gap: 1em 2em;
  grid-template-areas: "top1 top1 top2"
                       "top1 top1 bot1"
}

.a {
  grid-area: top1;
}
.e {
  grid-area: top2;
}
.grid > div {
  background-color: blue;
  color: white;
  padding: 2em;
  border-radius: 0.5em;
}

.a {

}

.b {
}