CSS Grid Areas permet de nommer les zones d'un layout avec grid-template-areas pour un code plus lisible et des mises en page complexes sans multiplier les sélecteurs.
On définit des zones nommées (header, main, sidebar, footer) dans une chaîne de caractères. Chaque élément enfant s'associe à une zone via grid-area. Le responsive se fait en changeant la grille (ordre des zones, répétition) selon les breakpoints. Pour les layouts en 2D (pages, cartes, dashboards), Grid Areas rend le code plus intentionnel qu'une grille purement ligne/colonne. Flexbox reste pertinent pour les alignements 1D ; Grid Areas s'impose pour les structures de page.
Conseil : combiner avec grid-template-rows/columns et des unités fr pour des layouts flexibles.
Points forts / Points faibles
Points forts
- Layout lisible et maintenable, zones nommées
- Réorganisation responsive en changeant une seule grille
- Alignement et gap gérés par la grille
- Support navigateurs excellent
Points faibles
- À maîtriser en plus de Flexbox (deux modèles)
- Support ancien IE limité (pour les projets legacy)
- Spécificité et héritage à garder en tête