JSFiddle - React, Tailwind, and code Playground

by jmpp77

HTML

<div class="parent">
  <div class="a">Zone A</div>
  <div class="b">Zone B</div>
  <div class="c">Zone C</div>
  <div class="d">Zone D</div>
  <div class="e">Zone E</div>
</div>

CSS

.parent {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: dense;
  
}


.a {
  /* grid-column-start: 1;
  grid-column-end: 3; */
  grid-column: 1 / span 2;
}

.e {
  grid-column-start: 4;
}

.d {
  grid-column-start: 3
}


/* Mise en forme pour la démo */
.parent { margin-top: 1.2rem; position: relative; border: medium solid black; min-height: 200px; }
.parent::before { position: absolute; top: -22px; font-family: 'Open Sans', sans-serif; content: ".parent"; }
.parent > * { font-weight: bold; font-family: 'Open Sans', sans-serif; color: transparent; text-shadow: 0 0 3px #000; }
.parent > :nth-child(1) { background-color: cornflowerblue; color: cornflowerblue; }
.parent > :nth-child(2) { background-color: crimson; color: crimson; }
.parent > :nth-child(3) { background-color: violet; color: violet; }
.parent > :nth-child(4) { background-color: aqua; color: aqua; }
.parent > :nth-child(5) { background-color: darksalmon; color: darksalmon; }