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: 2fr 1fr 1fr;
				/* Mise en forme */
				width: 800px;
				border: 1px solid #000;
			}
			p {
				margin: 0;
        padding: 5px;
			}
		</style>
	</head>
	<body>
		<div id="conteneur">
			<p><b>Un</b>. Dans le cas de grilles complexes avec beaucoup de colonnes et d'unités différentes, il peut-être fastidieux de calculer la somme de toutes les valeurs et faire en sorte que cette somme fasse bien la largeur totale du conteneur parent. </p>
			<p><b>Deux</b>. Dans cet exemple, nous souhaitons avoir trois colonnes. La première a une largeur fixée à 200px et la deuxième occuppe 30% de la largeur du parent. Quelle doit être la largeur de la troisième colonne ?</p>
			<p><b>Trois</b>. C'est là qu'intervient l'unité "fraction", notée "fr". La valeur "1fr" veut dire que la largeurest égale à une fraction de la largeur disponible. Donc, dans notre exemple, il suffit d'indiquer que la troisième colonne vaut "1fr".</p>
			<p><b>Quatre</b>. Voici les valeurs calculées :<br>
      - La première colonne vaut 200 px.<br>
      - La deuxième colonne vaut 240 px.<br>
      - La troisième colonne vaut 360 px.</p>
			<p><b>Cinq</b>. Nous avons bien un total de 800px, calculés automatiquement par le navigateur selon le modèle de grilles.</p>
			<p><b>Six</b>. Nous pouvons utiliser uiquement l'unité "fraction". Autre exemple :<br>
      #conteneur {
      - grid-template-columns: 2fr 1fr 1fr;<br>
      - width: 800px;<br>
      }
      La 1ère colonne occupe deux fractions de la largeur disponible, soit 400px. Les deux autres colonnes occupent une fraction de la place disponible restante, soit 200px chacune.</p>
      
      
		</div>
	</body>
</html>