subgrid en CSS : quand un enfant emprunte la grille de son parent

Un enfant de grille peut devenir lui-même un conteneur de grille, mais par défaut il crée alors des colonnes et des lignes totalement indépendantes de celles de son parent, sans aucun lien entre les deux. C'est un problème concret dès qu'on veut aligner du contenu à l'intérieur de plusieurs cartes sur la même grille verticale, un titre, une description, un prix, alignés d'une carte à l'autre même si les textes n'ont pas la même longueur.

subgrid résout exactement ce cas : au lieu de créer sa propre grille indépendante, un enfant peut hériter des pistes déjà définies par CSS Grid du parent, et s'y aligner directement.

Définition

subgrid est une valeur de grid-template-columns et grid-template-rows qui fait hériter un élément des pistes, les lignes et colonnes déjà tracées, de la grille de son parent, plutôt que d'en créer de nouvelles indépendantes. Un enfant en subgrid doit d'abord être positionné sur plusieurs pistes du parent avec grid-column et grid-row, sinon il n'y a rien à hériter : subgrid ne fonctionne que sur l'étendue de pistes que l'élément occupe déjà dans la grille parente.

Syntaxe

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.carte {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;
  gap: 16px;
}

Ici, .carte occupe trois colonnes du parent grâce à span 3, puis grid-template-columns: subgrid lui fait reprendre exactement ces trois colonnes comme ses propres pistes, au lieu d'en calculer de nouvelles à partir de son propre contenu. Toute future modification de grid-template-columns sur le parent se répercute automatiquement sur l'enfant, sans rien changer dans son propre CSS.

Le cas d'usage le plus courant : aligner des cartes inégales

Une grille de cartes, chacune avec un titre, une description et un prix de hauteurs différentes, pose un problème classique : sans subgrid, chaque carte aligne son propre contenu indépendamment des autres, et les prix par exemple ne tombent jamais à la même hauteur d'une carte à l'autre. Avec subgrid, chaque carte hérite des lignes de la grille parente, ce qui aligne automatiquement titre avec titre, description avec description, prix avec prix, quelle que soit la longueur du texte dans chaque carte.

subgrid contre une grille indépendante

subgrid peut lui aussi être hérité plus loin

Un élément en subgrid peut, à son tour, avoir un enfant qui hérite de ses propres pistes avec un second subgrid, ce qui propage l'alignement du grand-parent jusqu'à un descendant plus profond dans le HTML. Ce cas reste rare en pratique, mais il montre que subgrid n'est pas limité à une seule génération d'enfants : la chaîne d'héritage peut se poursuivre tant que chaque niveau reste positionné sur les pistes du niveau au-dessus.

Un piège à connaître : le gap ne s'hérite pas automatiquement

subgrid hérite des pistes du parent, mais pas de son gap, qui reste une propriété à part entière et doit être redéclarée sur l'enfant s'il doit correspondre à celui du parent.

Questions fréquentes

Oui, tous les navigateurs modernes le prennent en charge désormais, Safari ayant été le dernier à l'ajouter après Firefox et Chrome. Sur un projet qui doit encore soutenir d'anciennes versions de navigateurs, mieux vaut tout de même vérifier la compatibilité exacte visée avant de s'appuyer dessus comme seule solution d'alignement.

Oui, grid-template-columns: subgrid et grid-template-rows: subgrid s'appliquent indépendamment l'un de l'autre. Un enfant peut très bien hériter des colonnes du parent tout en gardant ses propres lignes calculées normalement, selon ce que la mise en page exige réellement.

Non, les deux répondent à des besoins différents. Une grille indépendante reste le bon choix quand le contenu de l'enfant n'a aucune raison de s'aligner avec le parent. subgrid n'est utile que dans le cas précis où cet alignement entre parent et enfant est justement ce qu'on cherche à obtenir.