Zones Grid CSS
Grid Items a enseigné les numéros de ligne et span. Les zones nommées posent une question plus amicale : peut-on dessiner la page en mots — header, sidebar, main, footer — et laisser chaque enfant revendiquer une étiquette ? grid-template-areas est la carte ; grid-area est l’épingle.
Une boîte à outils des zones grid
📊 Zones grid en un coup d’œil
| Propriété / jeton | Travail quotidien |
|---|---|
grid-template-areas |
Sur le conteneur : chaînes entre guillemets qui nomment chaque cellule |
grid-area |
Sur un élément : quelle région nommée cet enfant occupe |
| Nom répété | Même nom dans des cellules adjacentes = un rectangle qui s’étire |
. (point) |
Une cellule vide sans nom |
| Tracks du template | On dimensionne encore avec grid-template-columns / rows |
Chaque chaîne entre guillemets est une rangée de la carte. Les noms d’une rangée sont séparés par des espaces. Toutes les rangées doivent lister le même nombre de cellules, sinon le template est invalide.
grid-template-areas — dessiner la carte
Écrivez la mise en page voulue avec des labels simples. Une coquille de page classique couvre souvent quatre rôles nommés sur trois rangées.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
grid-area — épingler chaque enfant
Chaque enfant choisit un nom de la carte. Les classes peuvent rester en style BEM ; Grid lit le jeton de zone.
.shell__header { grid-area: header; }
.shell__aside { grid-area: aside; }
.shell__main { grid-area: main; }
.shell__footer { grid-area: footer; }
S’étirer en répétant un nom
Pour élargir une région, écrivez le même nom dans chaque cellule qui doit lui appartenir. La région doit rester un rectangle plein — pas de formes en L.
.magazine {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"hero hero hero"
"card1 card2 card3";
gap: 0.75rem;
}
.magazine__hero { grid-area: hero; }
Cellules vides avec un point
Un . seul marque un trou. Utile quand un plateau de cartes doit laisser un vide sans inventer un faux nom.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"alpha ."
"beta gamma";
gap: 0.5rem;
}
.board__a { grid-area: alpha; }
.board__b { grid-area: beta; }
.board__c { grid-area: gamma; }
Une habitude calme des zones nommées
Esquissez la carte dans grid-template-areas, dimensionnez les tracks avec columns/rows, puis épinglez les enfants avec grid-area. Gardez des noms courts et rectangulaires. Revenez à grid-column / grid-row quand un placement ponctuel est plus clair que de réécrire toute la carte. Les réécritures responsives de la carte attendent Grid Responsive.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas:
"nav content"
"nav content";
gap: 1.25rem;
}
.page__nav { grid-area: nav; }
.page__content { grid-area: content; }
Essayez vous-même
- Dessinez une carte header / aside+main / footer avec
grid-template-areas. - Assignez quatre enfants avec des valeurs
grid-areacorrespondantes. - Construisez un hero à trois colonnes qui répète
herosur la première rangée. - Laissez une cellule vide avec
.dans un plateau deux-par-deux. - Gardez les tailles de tracks sur le conteneur ; notez les échanges de carte pour la leçon Grid responsive suivante.
Erreurs fréquentes
- Nommer une région en L ou déconnectée (les zones doivent être des rectangles)
- Nombre de cellules différent entre les rangées entre guillemets
- Mettre
grid-template-areassur un enfant au lieu du conteneur - Traiter les noms de zone comme des sélecteurs de classe CSS — ce sont des jetons de template
- Supprimer
grid-template-columns/rowsen espérant que les noms seuls fixent les tailles
Résumé
- Les zones nommées transforment une mise en page en carte de cellules lisible
grid-template-areasvit sur le conteneur ;grid-areasur chaque élément- Répétez un nom pour span ; utilisez
.pour les cellules vides - Gardez des régions rectangulaires et couplez les noms au dimensionnement des tracks
- Le placement par lignes fonctionne encore ; les changements de carte responsives viennent après
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut