Subgrid

Definition

Valeur grid-template-rows/columns: subgrid qui permet à un item Grid d'hériter les pistes de son parent. Les enfants imbriqués s'alignent sur la grille parente, résolvant l'alignement cross-card.

Analogie

Comme des étagères imbriquées qui s'alignent parfaitement sur la structure du meuble parent.

Exemple de code

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

Cas d'usage

Aligner les titres, contenus et footers de cartes sur une même grille, même si les contenus varient.

Termes lies