JSFiddle - React, Tailwind, and code Playground

HTML

<div class="autour">
  <div class="container">
    <div class="element element1">Element 1</div>
    <div class="element element2">Element 2</div>
    <div class="element element3">Element 3</div>
    <div class="element element4">Element 4</div>
    <div class="element element5">Element 5<br>Element 5<br>Element 5<br>Element 5<br>Element 5<br></div>
    <div class="element element6">Element 6</div>
  </div>
</div>

CSS

.autour {
  background: black;
  padding: 20px;
}
.container {
  background: red;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
}
.element {
}
.element1 {
  background: red;
}
.element2 {
  background: yellow;
}
.element3 {
  background: green;
}
.element4 {
  background: grey;
}
.element5 {
  background: pink;
}
.element6 {
  background: #a569bd;
}