W3Schools Tryit Éditeur

<!DOCTYPE html>
<html>
<head>
<style>
.container {
affichage: grille;
zones-de-modèle-de-grille:
<header>en-tête</header>
"contenu du menu"
<footer footer>
grid-template-columns: 1fr 3fr;
écart : 3px;
couleur-de-fond: dodgerblue;
padding: 5px;
}
.container div {
couleur-de-fond: blanc;
padding: 10px;
}
.container div.header {
zone-de-grille: en-tête;
text-align: center;
}
.container div.menu {
zone-de-grille: menu;
}
.container div.content {
zone-de-grille: contenu;
}
.container div.footer {
zone-de-grille: pied-de-page;
text-align: center;
}
</style>
</head>
<body>

<p>Le module de mise en page Grid offre un système de mise en page basé sur une grille, avec des lignes et des colonnes.</p>
<p>Le module de mise en page en grille facilite la conception de pages web complexes et réactives sans utiliser de flottants ni de positionnement :</p>

<div class="container">
  <div class="header"><h2>Mon En-tête</h2></div>
  <div class="menu"><a href="#">Lien 1</a><br><a href="#">Lien 2</a><br><a href="#">Lien 3</a></div>
  <div class="content"><h3>Lorem Ipsum</h3><p>Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus sit nisl laoreet facilisis aliquet. Potenti dignissim litora eget montes rhoncus sapien neque urna. Cursus libero sapien integer magnis ligula lobortis quam ut.</p></div>
  <div class="footer"><h4>Pied de page</h4></div>
</div>

</body>

</html>