Placer des éléments dans une grille avec des numéros de ligne et de colonne fonctionne, mais devient difficile à relire quelques semaines plus tard : grid-column: 2 / 4 ne dit rien sur ce que contient cette zone. grid-template-areas résout ce problème en laissant nommer chaque zone de la grille directement dans le CSS, presque comme un dessin.
Cette propriété se lit comme un plan en art ASCII : on écrit la grille ligne par ligne, entre guillemets, avec le nom de la zone répété pour chaque case qu'elle occupe. Chaque enfant est ensuite rattaché à une zone avec grid-area, au lieu de coordonnées numériques.
Définition
grid-template-areas permet de nommer des zones rectangulaires d'une grille CSS Grid, en dessinant leur disposition avec du texte plutôt qu'en comptant des numéros de ligne et de colonne. Chaque enfant est ensuite associé à une zone avec la propriété grid-area, qui prend simplement le nom choisi. C'est une alternative à grid-column et grid-row, pensée pour les mises en page où la structure gagne à être lisible d'un coup d'œil.
Syntaxe : dessiner la grille en texte
.page {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas: "entete entete" "menu contenu" "pied pied";
}
.entete {
grid-area: entete;
}
.menu {
grid-area: menu;
}
.contenu {
grid-area: contenu;
}
.pied {
grid-area: pied;
}Chaque ligne entre guillemets représente une ligne de la grille, et chaque mot une case. Ici, entete occupe les deux colonnes de la première ligne, menu et contenu se partagent la deuxième ligne, et pied occupe de nouveau toute la largeur. Le nombre de mots par ligne doit correspondre au nombre de colonnes défini par grid-template-columns, ici deux.
Réorganiser toute la mise en page selon l'écran
.page {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "entete" "contenu" "menu" "pied";
}
@media (min-width: 900px) {
.page {
grid-template-columns: 240px 1fr;
grid-template-areas: "entete entete" "menu contenu" "pied pied";
}
}Sur un petit écran, la mise en page empile les zones dans un ordre logique pour la lecture verticale, avec une seule colonne. Passé 900 pixels de large, une Media query redéfinit entièrement grid-template-areas pour faire apparaître la barre latérale et réorganiser les zones en deux colonnes. Le HTML, lui, ne change pas d'une ligne : seule la disposition visuelle bascule d'un plan à l'autre.
C'est un des arguments les plus forts en faveur de grid-template-areas face à des numéros de ligne : redessiner entièrement une mise en page pour un autre écran ne demande que de réécrire le texte entre guillemets, sans recalculer le moindre numéro de ligne de grille.
La règle de la forme rectangulaire
Une zone nommée doit toujours former un rectangle plein, sans trou et sans forme en L ou en croix. Un point, écrit avec un point seul, marque une case volontairement vide, qui n'appartient à aucune zone.
grid-template-areas. Aucune erreur ne s'affiche dans la console : la grille retombe silencieusement sur un placement automatique, ce qui rend le bogue difficile à repérer sans inspecter l'élément.Pourquoi c'est plus lisible que des numéros
Avec des numéros de ligne, comprendre la structure d'une page demande de reconstituer mentalement la grille à partir de plusieurs déclarations séparées. Avec grid-template-areas, la structure entière est visible d'un seul bloc, dans l'ordre où les zones apparaissent réellement à l'écran. C'est particulièrement utile pour les mises en page qui changent selon la taille d'écran, où l'on redéfinit grid-template-areas dans une media query pour réorganiser complètement les zones sans toucher au HTML.
Questions fréquentes
Non. Les cases qu'on ne souhaite pas nommer se marquent avec un point, ce qui les laisse vides et disponibles pour un placement automatique ou pour rester simplement inoccupées. Seules les cases qui doivent accueillir un élément précis ont besoin d'un nom.
grid-template-areas sans grid-template-columns ?Techniquement oui, mais dans la pratique les deux vont toujours ensemble : sans grid-template-columns, le nombre et la largeur des colonnes ne sont pas définis, et le nom des zones ne suffit pas à indiquer la largeur de chaque colonne du plan.
Non, ce sont deux choses totalement indépendantes. Le nom donné dans grid-template-areas est un identifiant libre, choisi uniquement pour être lisible : il n'a aucun lien automatique avec le nom des classes ou des balises HTML, il sert juste de référence pour la propriété grid-area.