Éditeur Tryit de W3Schools

<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}

body {
police: Arial, Helvetica, sans-serif;
}

/* Styliser l'en-tête */
.header {
zone-de-grille: en-tête;
couleur de fond: #f1f1f1;
padding: 30px;
text-align: center;
taille de police: 35px;
}

/* Le conteneur de grille */
.grid-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>
'gauche milieu milieu milieu milieu droite'
'footer footer footer footer footer footer';
/* grid-column-gap: 10px; - si vous voulez un espace entre les colonnes */
}

.left,
.middle,
.right {
padding: 10px;
height: 300px; /* Devrait être supprimé. Seulement pour démonstration */
}

/* Styliser la colonne de gauche */
.left {
zone-de-grille: gauche;
}

/* Styliser la colonne du milieu */
.middle {
zone-de-grille: milieu;
}

/* Styliser la colonne de droite */
.right {
zone-de-grille: droite;
}

/* Styliser le pied de page */
.footer {
zone-de-grille: pied-de-page;
couleur-de-fond: #f1f1f1;
padding: 10px;
text-align: center;
}

/* Mise en page responsive - fait empiler les trois colonnes les unes sur les autres au lieu de les placer côte à côte */
@media (max-width: 600px) {
.grid-container  {
zones-de-modèle-de-grille:
'en-tête en-tête en-tête en-tête en-tête en-tête'
'gauche gauche gauche gauche gauche gauche'
'milieu milieu milieu milieu milieu milieu'
'droite droite droite droite droite droite'
'pied de page pied de page pied de page pied de page pied de page';
}
}
</style>
</head>
<body>

<h2>Modèle CSS utilisant Grid</h2>
<p>Dans cet exemple, nous avons créé un en-tête, trois colonnes inégales et un pied de page. Sur les écrans plus petits, les colonnes s'empileront les unes sur les autres.</p>
<p>Redimensionnez la fenêtre du navigateur pour voir l'effet réactif.</p>
<p><strong>Remarque :</strong>Le module de mise en page Grid n'est pas pris en charge dans Internet Explorer ou Edge 15 et les versions antérieures.</p>

<div class="grid-container">
  <div class="header">
    <h2>En-tête</h2>
  </div>
  
  <div class="left" style="background-color:#aaa;">Colonne</div>
  <div class="middle" style="background-color:#bbb;">Colonne</div>  
  <div class="right" style="background-color:#ccc;">Colonne</div>
  
  <div class="footer">
    <p>Pied de page</p>
  </div>
</div>

</body>

</html>