Propriété CSS grid-template-areas
Apprenez à utiliser CSS grid-template-areas pour nommer des régions de grille, créer des mises en page visuellement et les réorganiser avec les media queries.
La propriété grid-template-areas vous permet de disposer une CSS Grid visuellement en dessinant la mise en page avec des noms plutôt que des numéros. Vous l'appliquez à un conteneur de grille et lui passez une chaîne entre guillemets par ligne de grille. À l'intérieur de chaque chaîne, vous écrivez un nom pour chaque cellule de colonne, et les cellules qui partagent le même nom se combinent en une seule zone nommée rectangulaire.
Chaque élément de grille est ensuite placé en faisant référence à l'un de ces noms avec la propriété grid-area — par exemple grid-area: header; place cet élément là où vous avez écrit header dans le gabarit. Comme les chaînes s'alignent les unes sous les autres comme une image ASCII, le code source finit par ressembler à la page qu'il produit, ce qui rend les mises en page complexes bien plus faciles à lire et à réorganiser que si vous deviez définir grid-row-start, grid-column-start et leurs raccourcis associés à la main.
Référence de la propriété
| Valeur initiale | none |
| S'applique à | Conteneurs de grille |
| Héritage | Non |
| Animatable | Non |
| Version | CSS Grid Layout Module Level 1 |
Syntaxe
grid-template-areas: none | <string>+;none est la valeur par défaut et signifie qu'aucune zone nommée n'est définie. Sinon, la valeur est une ou plusieurs chaînes entre guillemets — une par ligne.
Comment lire les chaînes
Quelques règles permettent de comprendre la syntaxe :
- Une chaîne = une ligne. Trois chaînes entre guillemets créent trois lignes ; le nombre de noms dans chaque chaîne détermine le nombre de colonnes.
- Chaque chaîne doit contenir le même nombre de tokens, sinon le navigateur considère l'ensemble de la déclaration comme invalide et l'ignore.
- Un nom répété couvre plusieurs cellules. Écrire le même nom dans deux ou plusieurs cellules adjacentes — horizontalement, verticalement ou en rectangle — les fusionne en une seule zone. La forme doit être rectangulaire ; une forme en L est invalide.
- Un point (
.) marque une cellule vide qui n'appartient à aucune zone nommée. Plusieurs points consécutifs (par ex....) comptent comme une seule cellule vide et constituent une convention courante pour la lisibilité. - Nommer une zone ne dimensionne pas ses pistes. Utilisez grid-template-columns et grid-template-rows — ou le raccourci grid-template — pour contrôler les dimensions.
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"menu main right"
"footer footer footer";
}Ici, header et footer s'étendent chacun sur les trois colonnes, tandis que menu, main et right sont côte à côte dans la ligne du milieu.
Valeurs
| Valeur | Description |
|---|---|
none | Aucune zone de grille nommée n'est définie. Les éléments de grille sont placés par d'autres moyens (numéros de lignes, span ou placement automatique). |
<string>+ | Une ou plusieurs chaînes entre guillemets qui dessinent le gabarit. Chaque chaîne représente une ligne ; chaque token séparé par un espace dans une chaîne représente une cellule. Les tokens répétés forment des zones nommées rectangulaires ; un token . est une cellule sans nom (vide). |
Exemple de mise en page de base
La mise en page classique en coquille de page — en-tête, barre latérale, contenu et pied de page — est la démonstration la plus simple de l'utilité des zones nommées.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box1 { grid-area: header; }
.box2 { grid-area: menu; }
.box3 { grid-area: main; }
.box4 { grid-area: right; }
.box5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
"header header header header header header"
"menu main main main right right"
"menu footer footer footer footer footer";
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-template-areas property example</h2>
<div class="grid-container">
<div class="box1">Header</div>
<div class="box2">Menu</div>
<div class="box3">Main</div>
<div class="box4">Right</div>
<div class="box5">Footer</div>
</div>
</body>
</html>Résultat
Cellules vides avec des points
Un token point place un élément dans aucune zone nommée, laissant cette cellule inoccupée. Dans l'exemple ci-dessous, item1 s'étend sur les deux premières colonnes d'une grille à cinq colonnes ; les trois cellules restantes de cette seule ligne sont vides.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box { grid-area: item1; }
.grid-container {
display: grid;
grid-template-areas: "item1 item1 . . .";
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Grid-template-areas property example</h2>
<div class="grid-container">
<div class="box">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Mises en page responsives avec les media queries
grid-template-areas s'associe naturellement aux media queries : il suffit de réécrire les chaînes à l'intérieur du bloc de point de rupture et la mise en page se redessine sans modification du balisage ni besoin de renuméroter les lignes de grille.
/* Mobile: single-column stack */
.page {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"menu"
"main"
"footer";
}
/* Desktop: sidebar left, content right */
@media (min-width: 700px) {
.page {
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"menu main"
"footer footer";
}
}Chaque élément de grille conserve son nom grid-area ; seul le gabarit change. C'est la principale raison pour laquelle les zones nommées sont préférées au placement par numéros de lignes dans les designs responsives.
Pièges courants
Les zones doivent être rectangulaires
Si le même nom apparaît en forme de L, en diagonale ou dans tout motif non rectangulaire à travers les cellules, le navigateur considère l'ensemble de la déclaration grid-template-areas comme invalide et revient à none. Chaque zone nommée doit former un rectangle ininterrompu.
/* INVALID — "content" forms an L-shape */
.bad {
grid-template-areas:
"header header"
"content sidebar"
"content content"; /* content is now L-shaped → invalid */
}
/* VALID — "content" is rectangular */
.good {
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
}Toutes les lignes doivent avoir le même nombre de colonnes
Chaque chaîne entre guillemets doit avoir le même nombre de tokens séparés par des espaces. Complétez les lignes plus courtes avec des tokens points pour aligner les colonnes :
/* INVALID — row 2 has only 2 tokens, row 1 has 3 */
.bad {
grid-template-areas:
"a a b"
"c c";
}
/* VALID — three tokens in every row */
.good {
grid-template-areas:
"a a b"
"c c .";
}Nommer une zone ne dimensionne pas ses pistes
Les zones nommées indiquent au navigateur quelles cellules appartiennent ensemble, pas quelle est leur taille. Associez toujours grid-template-areas à grid-template-columns et grid-template-rows :
.container {
display: grid;
grid-template-columns: 180px 1fr; /* sidebar fixed, content fluid */
grid-template-rows: 60px 1fr 40px; /* header, body, footer heights */
grid-template-areas:
"header header"
"nav content"
"nav footer";
}Les éléments de grille sans correspondance sont placés automatiquement
Si le nom grid-area d'un enfant ne correspond à aucune zone du gabarit, le navigateur le place automatiquement en utilisant l'algorithme grid-auto-flow — il atterrit dans la prochaine cellule implicite disponible plutôt que de disparaître.
Le raccourci grid-template
La propriété grid-template combine grid-template-rows, grid-template-columns et grid-template-areas en une seule déclaration :
.container {
display: grid;
grid-template:
"header header" 60px
"nav content" 1fr
"footer footer" 40px
/ 180px 1fr;
}La taille de ligne suit chaque chaîne sur la même ligne ; les tailles de colonnes viennent après le / final. Le résultat est identique à écrire les trois propriétés séparément.