Skip to main content

Chapitre 81 : Stratégies Avancées d'Alignement

1. Le Subgrid Bidimensionnel​

Il est possible d'utiliser subgrid simultanément sur les lignes et les colonnes. C'est particulièrement utile pour des tableaux de données complexes où des groupes de cellules doivent être encapsulés dans des composants tout en restant parfaitement alignés avec le reste du tableau.

.dashboard {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: auto auto auto;
}

.widget-group {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

2. Gestion des Gaps et "Overriding"​

Le comportement du gap dans un subgrid est subtil. Si vous ne spécifiez pas de gap sur l'élément subgrid, il utilise celui du parent. Si vous en spécifiez un, il remplace le gap du parent uniquement pour les éléments enfants du subgrid.

C'est un outil puissant pour créer des "zones de respiration" différentes à l'intérieur d'un composant sans casser l'alignement global.

3. Interaction avec auto-fill et auto-fit​

L'utilisation de subgrid avec des colonnes générées dynamiquement (auto-fill / auto-fit) est possible, mais demande de la prudence. L'élément subgrid doit être capable de calculer son span dynamiquement.

L'astuce consiste souvent à utiliser grid-column: 1 / -1 pour s'assurer que le subgrid couvre toute la largeur de la grille parente, peu importe le nombre de colonnes générées.

Questions clés​

1. Quelle est la différence fondamentale entre une grille imbriquée (Nested Grid) et une sous-grille (Subgrid) ?

Découvrir la réponse

Une grille imbriquée crée un nouveau contexte de grille indépendant. Les pistes de l'enfant ne sont pas liées aux pistes du parent. Le subgrid, en revanche, permet à l'enfant d'utiliser les pistes définies par le parent, alignant ainsi les enfants de l'enfant sur la grille globale.

2. Un élément en subgrid peut-il avoir ses propres dimensions de pistes ?

Découvrir la réponse

Non. Par définition, grid-template-columns: subgrid signifie que l'élément abandonne le contrôle de la taille de ses pistes pour le fait de le parent. Cependant, il peut toujours influencer la taille des pistes du parent via le contenu de ses enfants (si le parent utilise auto ou fr).

3. Que se passe-t-il si l'élément subgrid n'occupe qu'une seule piste du parent ?

Découvrir la réponse

Le mot-clé subgrid est ignoré. Pour qu'un subgrid fonctionne, l'élément doit s'étendre sur au moins deux lignes ou colonnes du parent.

4. Comment le subgrid impacte-t-il le rendu des composants encapsulés (ex: Shadow DOM) ?

Découvrir la réponse

Le subgrid est extrêmement puissant pour le Shadow DOM car il permet de maintenir un alignement structurel même lorsque les éléments sont encapsulés. Tant que l'élément hôte est positionné sur la grille parente, le contenu interne peut s'aligner sur les pistes globales.

Mise en pratique​

Exercice 1 : Reproduction guidée​

Objectif : Créer une grille de cartes de produits simple où les titres et les prix sont alignés horizontalement sur toutes les cartes.

Consignes :

  1. Créez un conteneur .product-grid avec 3 colonnes.
  2. Créez des éléments .product-card qui s'étendent sur 3 lignes (grid-row: span 3).
  3. Appliquez display: grid et grid-template-rows: subgrid à .product-card.
Découvrir la solution commentée
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* On définit les 3 lignes pour Titre, Description, Prix */
  grid-template-rows: auto auto auto; 
  gap: 20px;
}

.product-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* Obligatoire pour le subgrid */
  border: 1px solid #ddd;
  padding: 10px;
}

Exercice 2 : Adaptation​

Objectif : Modifier l'exemple précédent pour que le gap interne des cartes soit plus petit que le gap entre les cartes.

Consignes :

  1. Reprenez le code de l'exercice 1.
  2. Ajoutez un gap spécifique à .product-card pour écraser l'héritage du parent.
Découvrir la solution commentée
.product-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 30px; /* Gap global large */
}

.product-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 10px; /* Gap interne plus serré */
  border: 1px solid #ddd;
}

Exercice 3 : Conception​

Objectif : Concevoir un layout de magazine complexe où un article possède un titre, une image et un extrait. L'image doit être alignée sur une colonne spécifique de la grille globale du site, tandis que le titre et l'extrait s'étendent sur plusieurs colonnes.

Consignes :

  1. Le site a une grille de 12 colonnes.
  2. L'article (.article-item) doit occuper les colonnes 2 à 11.
  3. L'image de l'article doit être positionnée exactement sur la colonne 4 à 6 de la grille globale.
  4. Utilisez subgrid pour permettre à l'image de "voir" les colonnes du parent.
Découvrir la solution commentée
/* Grille globale du site */
.site-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

/* L'article est le conteneur subgrid */
.article-item {
  grid-column: 2 / 12; /* Occupe de la col 2 à 12 */
  display: grid;
  grid-template-columns: subgrid; /* Hérite des 12 colonnes */
  gap: 20px;
}

/* 
   L'image est un enfant de l'article. 
   Elle se place sur les colonnes 4 à 6 de la grille GLOBALE.
   Attention : Comme l'article commence à la col 2, 
   la col 1 du subgrid correspond à la col 2 du parent.
*/
.article-image {
  grid-column: 4 / 7; /* Aligné sur les colonnes du parent */
  width: 100%;
  height: auto;
}

.article-title {
  grid-column: 2 / 12;
  font-size: 2rem;
}

.article-excerpt {
  grid-column: 3 / 11;
  grid-column: 2 / 12;
}