Sous-grille CSS

Publié le 28 septembre 2023

La grille CSS est un moteur de mise en page très puissant, mais les canaux de ligne et de colonne créés sur une grille parente ne peuvent être utilisés que pour positionner les enfants directs du conteneur de grille. Toutes les zones et lignes de grille nommées définies par l'auteur étaient perdues sur tout autre élément qu'un enfant direct. Avec subgrid, la taille, les modèles et les noms des pistes peuvent être partagés avec des grilles imbriquées. Cet article explique son fonctionnement.

Avant la sous-grille, le contenu était souvent adapté manuellement pour éviter les mises en page désordonnées comme celle-ci.

Après la sous-grille After, vous pouvez aligner le contenu de taille variable.

Principes de base des sous-grilles

Voici un cas d'utilisation simple qui présente les principes de base du CSS subgrid. Une grille est définie avec deux colonnes nommées, la première ayant une largeur de 20ch et la seconde correspondant au "reste" de l'espace 1fr. Les noms de colonnes ne sont pas obligatoires, mais ils sont très utiles à des fins d'illustration et d'éducation.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

Ensuite, un enfant de cette grille, qui s'étend sur ces deux colonnes, est défini comme un conteneur de grille et adopte les colonnes de son parent en définissant grid-template-columns sur subgrid.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}

C'est tout. Les colonnes d'une grille parente ont été transmises à un niveau inférieur à une sous-grille. Cette sous-grille peut désormais attribuer des enfants à l'une ou l'autre de ces colonnes.

Défi ! Répétez la même démonstration pour grid-template-rows.