Nommer les zones de la grille

L’objectif est de simplifier la conception des grilles avec le positionnement des éléments enfants dans des zones que nous allons nommer.

Schéma récapitulatif

Pour cette mise en page en 2 colonnes, nous allons définir le nom des zones, les Grids Areas. La propriété grid-template-areas permet d'attribuer un nom à chaque zone > chaque nom de zone est indiqué entre guillemets et est séparé du suivant par un espace.

grid-template-areas:
"en-tete en-tete"
"contenu col-droite"
"pied-page pied-page";

Ici le contenu du header

Main

Donec id elit non mi porta gravida at eget metus...

Vestibulum id ligula porta felis euismod semper...