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>Nommer lignes grille Page 200 F et G</title>
		<style>
			body {
				padding: 50px;
			}
			/* Grille commune */
			#conteneur {
				/* Grille de mise en page */
				display: grid; 
				grid-template-columns: [ligne-vert-gauche] 1fr
				[ligne-vert-centre] 250px [ligne-vert-droite];
				gap: 5px;
				/* Mise en forme */
				width: 90%;
				margin: auto;
			}
			/* Requête de média */
			@media screen and (min-width: 768px){
				#conteneur {
					grid-template-columns: 1fr 250px;
					grid-template-areas:
						"en-tete en-tete"
						"contenu col-droite"
						"pied-page pied-page";
					gap: 20px;
				}
				header {
					grid-area: en-tete;
				} 
				main {
					grid-area: contenu;
				}
				aside {
					grid-area: col-droite;
				} 
			  footer {
					grid-area: pied-page;
				} 
			}
			/* Mise en forme */
			header, footer {
				background-color: lightgreen;
				text-align: center;
				grid-columns: ligne-vert-gauche / ligne-vert-droite;
			}
			aside {
				background-color: lightyellow;
			}
			header, main, aside, footer {
				border: 1px solid #000;
				border-color: red;
				border-radius: 6px;
				padding: 10px;
			}
			main {
				background-color: lightblue;
			}
			h1 {
				color: blue;
				margin: 0;
			}
			h3 {
				margin: 0;
			}
			p {
				margin: 0 0 20px 0;
			}
		</style>
	</head>
	<body>
		<div id="conteneur">
			<header>
				<h1>Nommer les lignes de la grille</h1><br>
        <h3>
          HEADER
        </h3>
			</header>
			<main>
      <p><mark>MAIN.</mark> Cette fois, la position des éléments va se faire, non pas avec le N° des lignes, mais avec des lignes nommées. Il peut être plus facile de travailler avec des lignes que nous pouvons
	  nommer qu'avec des N° de ligne qu'il n'est pas forcément aisé de connaître.<br></p>
				<p>Nous avons trois lignes verticales nommées:<br>
				- La première...