JSFiddle - React, Tailwind, and code Playground

by jmpp77

HTML

<div class="parent">
  <nav>nav</nav>
  <section>section</section>
  <article>article</article>
  <aside>aside</aside>
   <nav>nav</nav>
  <section>section</section>
  <article>article</article>
  <aside>aside</aside>
   <nav>nav</nav>
  <section>section</section>
  <article>article</article>
  <aside>aside</aside>
</div>

CSS

.parent {
  display: grid;
  
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 1rem;
}

nav {
  border: 1px solid red;
  padding: 1rem;
  margin: 0.5rem;
}




/* Mise en forme pour la démo */
.parent { margin-top: 1.2rem; position: relative; border: medium solid black; }
.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 nav { background-color: cornflowerblue; color: cornflowerblue; }
.parent section { background-color: crimson; color: crimson; }
.parent article { background-color: violet; color: violet; }
.parent aside { background-color: aqua; color: aqua; }