JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<title>Ma page web</title>
		<style>
			body {
				padding: 50px;
			}
			#conteneur {
				/* Grille de mise en page */
				display: grid;
				grid-template-columns: repeat(3,300px);
			  grid-auto-flow: column;
			  gap: 10px;
 				/* Mise en forme */
				width: 1050px;
				border: 1px solid blue;
			}
			p {
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div id="conteneur">
			<p>Un. La position des enfants dans la grille.<br>Nous allons maintenant aborder un point très important dans l'élaboration des grilles. Voyons comment les navigateurs positionnent les éléments enfants dans une mise en page en grille. Ce sont des algoritmes embarqués dans les navigateurs qui placent automatiquement les éléments enfants dans le conteneur de grille parent.</p>
			<p>Deux. Nous indiquons explicitement que nous avons trois colonnes de 300px de large:[grid-template-columns: repeat(3, 300px)].<br> A noter que j'ai ajouté une gouttière verticale "gap" de 10px, pour espacer les enfants.</p>
			<p>Trois. Le conteneur parent a une largeur de 900px, il peut donc parfaitement contenir trois éléments enfants de 300px de largeur respectivement.</p>
			<p>Quatre. Enfants supplémentaires.<br>
      Ajoutons maintenant un nouvel enfant.<br>Dans le parent, il reste une largeur disponible de 150px, mais comme nous avons demandé 3 colonnes [grid-template-columns: repeat(3, 300px);]le quatrième enfant passe à la ligne.Il nous faut ajouter dans le parent [grid-auto-flow: column;] pour que le 4ème enfant s'aligne avec les trois autres.<br>
      On peut augmenter la largeur du conteneur parent, pour diminuer la hauteur de la 4ème colonne (4ème enfant). Ainsi l'affichage sera mieux réparti.</p>
			<!-- <p>Cinq</p>
			<p>Six</p>
			<p>Sept</p>
			<p>Huit</p>
			<p>Neuf</p>
			<p>Dix</p> -->
		</div>
	</body>
</html>