JSFiddle - React, Tailwind, and code Playground

HTML

<style>
.grid-conteneur {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 2px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-conteneur > div {
  background-color: rgba(255, 255, 255, 1.8);
  font-size: 1.1em;
  word-break: break-all;
  color: blue;
}

.h1 {
  color: green;
  font-size: 2.5em;
  text-align: center;
}

.item1 {
  grid-area: 2 / 1 / span2 / span3;
}

.item7 {
  grid-area: 3 / 2;
}

.p1 {
  font-size: 1.5em;
  color: green;
}

.p2 {
  font-size: 1.2em;
  color: blue;
}
</style>

<body>
<h1 class="h1">grid-area propriètés</h1>
<p class="p1">Utiliser <em>grid-area</em> pour spécifier où placer un élément.</p>
<p class="p2">La syntaxe est <em>grille-ligne-début / grille-colonne-début / grille-ligne-fin / grille-colonne-fin.</em></p>
<p class="p2">Item1 débutera sur la ligne 2 et la colonne 1, et s'étendra sur 2 lignes et 3 colonnes.</p>
<p class="p2">Item7 débutera sur la ligne3 et la colonne 2.</p>
<div class="grid-conteneur">
  <div class="item1"> 1 aaaaaaa aaaaaaa aaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaaaaaaa aaaaaaaa aaaaaaaa aaaaaaa aaaaaaaaaaa aaaaaaaaa</div>
  <div class="item2"> 2 bbbbbbbb bbbbbbbbb bbbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbb</div>
  <div class="item2"> 3 ccccccc cccccccccccc cccccccccccc cccccccccccc ccccccccccccc cccccc</div>
  <div class="item2"> 4 ddddddd ddddddddddd ddddddddddddd dddddddddddd dddddddddddd dddddddd</div>
  <div class="item2"> 5 eeeeeee eeeeeeeeee eeeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeeeeee eeeeeee</div>
  <div class="item2"> 6 fffffff ffffffffff ffffffffffff fffffffffff ffffffffffff ffffffff fff</div>
  <div class="item7"> 7 ggggggg gggggggggg ggggggggggg ggggggggggggg ggggggggggg gggggggggggg</div>
</div>
</body>