CSS Subgrid permet aux enfants d'une grille d'hériter des lignes ou colonnes du parent. Les cartes et les listes s'alignent parfaitement dans une grille globale sans recalcul manuel.
En mettant grid-template-rows: subgrid (ou columns) sur un enfant, celui-ci réutilise les tracks du parent. Tous les éléments d'une même « rangée » de cartes partagent la même hauteur de ligne, par exemple. Pour les cartes de contenu (titre, description, meta) ou les tableaux de données, Subgrid évite les hacks (flex, min-height) et donne un alignement propre. Combiné à Grid Areas, Subgrid rend les layouts composables et prévisibles.
Conseil : activer subgrid sur les wrappers de cartes dans une grille parent pour aligner les blocs (titre, texte, bouton) entre cartes.
Points forts / Points faibles
Points forts
- Alignement parfait des composants dans une grille sans JS
- Code plus simple que les solutions flex/min-height
- Composants réutilisables qui s'adaptent au parent
- Support navigateurs en progression (Firefox, Safari, Chrome)
Points faibles
- Support encore à vérifier sur les cibles (Safari, anciens Chrome)
- Un seul niveau de subgrid (pas de subgrid imbriqué)
- Documentation et exemples à découvrir