Qu'est-ce que Générateur de layout Subgrid CSS ?
Subgrid est une fonctionnalite CSS Grid où un conteneur de grille imbrique peut heriter des pistes de grille de son parent. Au lieu de definir ses propres grid-template-columns ou grid-template-rows, l'enfant utilise subgrid pour aligner les elements avec les lignes de la grille parente. C'est utile pour les grilles de cartes où chaque carte necessite un alignement interne.
Réponse rapide
Utilisez CSS subgrid pour aligner les elements de grille imbriques avec les pistes de leur grille parente. L'enfant utilise grid-template-columns: subgrid et/ou grid-template-rows: subgrid pour heriter du dimensionnement des pistes, des ecarts et des lignes nommees de la grille parente.
Last updated: 2026-05-28
Limites
- Subgrid nécessite que le parent soit un conteneur de grille avec des pistes explicites.
- Le support navigateur pour subgrid est plus recent que pour CSS Grid de base.
- L'enfant subgrid ne peut pas remplacer l'ecart du parent. Les ecarts sont herites de l'ancetre de grille le plus proche.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Comment utiliser cet outil
- Definissez les colonnes de la grille parente et optionnellement les lignes. L'enfant subgrid herite de ces pistes.
- Definissez l'etendue de colonne et de ligne pour l'enfant subgrid - combien de cellules de la grille parente il occupe.
- Choisissez si l'enfant utilise subgrid pour les colonnes, les lignes ou les deux.
- Copiez le CSS parent et enfant et appliquez les selecteurs correspondants dans votre HTML.
A quoi il sert
- Creer une grille de cartes ou chaque carte a un en-tete, un corps et un pied de page alignes sur les colonnes.
- Construire une mise en page de formulaire où les paires etiquette-champ s'alignent entre les sections en utilisant subgrid.
- Concevoir un tableau de bord où des widgets de differentes tailles partagent l'alignement avec la grille principale.