W3Schools Tryit Éditeur

<!DOCTYPE html>
<html>
<head>
<style>
.container {
affichage: grille;
zones-de-modèle-de-grille:
<header>en-tête en-tête en-tête en-tête en-tête en-tête</header>
'menu principal principal principal principal droite'
'menu pied de page pied de page pied de page pied de page pied de page';
couleur-de-fond: dodgerblue;
padding: 5px;
écart: 5px;
}

.container div {
couleur-de-fond: #f1f1f1;
couleur:#000;
padding: 10px;
taille-de-police: 30px;
text-align: center;
}

.item1 {grid-area: header;}
.item2 {grid-area: menu;}
.item3 {grid-area: main;}
.item4 {grid-area: right;}
.item5 {grid-area: footer;}
</style>
</head>
<body>

<h1>La propriété grid-area</h1>

<p>Vous pouvez utiliser le<em>zone-de-grille</em>propriété pour nommer les éléments de la grille.</p>

<p>Cette mise en page en grille contient six colonnes et trois lignes :</p>

<div class="container">
  <div class="item1">En-tête</div>
  <div class="item2">Menu</div>
  <div class="item3">Principal</div>  
  <div class="item4">Droit</div>
  <div class="item5">Pied de page</div>
</div>

</body>

</html>