JSFiddle - React, Tailwind, and code Playground

HTML

<div id="maBelleGrille">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

CSS

/** J'ai un élément qui s'appelle maBelleGrille.... */
#maBelleGrille {
  display: grid; /** ...sa façon se s'afficher est en grid */
  row-gap: 30px; /** ...avec 30px d'écart entre les lignes */
  column-gap: 10px; /** ...et 10px entre les colonnes */
  grid-template-columns: repeat(auto-fill, 200px); /** ...et toutes les colonnes sont à 200px et se démerdent pour remplir */
}

/** Concernant chacun des enfants de maBelleGrille... */
#maBelleGrille>* { 
  background-color: green; /** ...ils auront un fond vert */
  height: 200px; /** ...et 200px de hauteur. */
}