CSS Subgrid - Partager les grilles avec les descendants

Imagine la Grande Pyramide de Gizeh. Sa construction repose sur une grille précise de blocs de pierre qui traverse toutes les couches de la structure - des fondations, en passant par les chambres, jusqu'au sommet. Chaque chambre intérieure est parfaitement alignée avec la structure extérieure. C'est exactement ainsi que fonctionne le CSS Subgrid - il permet aux éléments enfants d'hériter et de partager la grille de leur parent, garantissant un alignement parfait à tous les niveaux d'imbrication.

Le problème que résout Subgrid

Sans subgrid, lorsque tu crées une grille imbriquée, l'élément enfant crée sa propre grille indépendante. C'est comme construire une pyramide plus petite à l'intérieur de la grande pyramide, mais sans conserver l'alignement avec les blocs principaux.

Prenons un exemple typique - une grille de cartes où chaque carte possède un en-tête, un corps et un pied de page. Nous voulons que les en-têtes de toutes les cartes soient alignés, que les corps soient alignés et que les pieds de page soient alignés - quelle que soit la quantité de texte dans chaque section.

Sans Subgrid - Le problème d'alignement

1.grid {
2  display: grid;
3  grid-template-columns: repeat(3, 1fr);
4  gap: 1.5rem;
5}
6
7/* Chaque carte a sa PROPRE grille - aucun alignement entre les cartes ! */
8.card {
9  display: grid;
10  grid-template-rows: auto 1fr auto;
11}

Dans ce cas, l'en-tête d'une carte peut être plus haut que celui d'une autre, ce qui fait que le corps et le pied de page ne s'alignent pas sur la même ligne. C'est comme si les chambres intérieures d'une pyramide ne correspondaient pas à la grille des blocs extérieurs.

Avec Subgrid - Un alignement parfait

1.grid {
2  display: grid;
3  grid-template-columns: repeat(3, 1fr);
4  /* Définir des lignes partagées pour TOUTES les cartes */
5  grid-template-rows: subgrid;
6  gap: 1.5rem;
7}
8
9.card {
10  display: grid;
11  /* La carte HÉRITE des lignes du parent */
12  grid-template-rows: subgrid;
13  /* La carte s'étend sur 3 lignes du parent */
14  grid-row: span 3;
15}

Maintenant, les en-têtes, les corps et les pieds de page de toutes les cartes sont parfaitement alignés - parce qu'ils partagent tous la même grille de lignes.

Syntaxe de Subgrid

Subgrid s'utilise comme valeur pour grid-template-columns ou grid-template-rows (ou les deux) :

1/* Subgrid pour les colonnes uniquement */
2.child {
3  display: grid;
4  grid-template-columns: subgrid;
5}
6
7/* Subgrid pour les lignes uniquement */
8.child {
9  display: grid;
10  grid-template-rows: subgrid;
11}
12
13/* Subgrid pour les deux axes */
14.child {
15  display: grid;
16  grid-template-columns: subgrid;
17  grid-template-rows: subgrid;
18}

L'élément enfant doit :

1. Avoir display: grid
2. Être un enfant direct d'un élément grille
3. S'étendre sur au moins 2 pistes dans l'axe où il utilise subgrid

Exemple pratique : disposition de cartes

1.gallery {
2  display: grid;
3  grid-template-columns: repeat(3, 1fr);
4  gap: 1rem;
5}
6
7.card {
8  display: grid;
9  /* Hériter des colonnes du parent - pas nécessaire ici puisque la carte s'étend sur 1 colonne */
10  /* Hériter des LIGNES - utile ici */
11  grid-row: span 3;
12  grid-template-rows: subgrid;
13  border: 2px solid #d4af37;
14  border-radius: 8px;
15  overflow: hidden;
16}
17
18.card-header {
19  background: #8b6914;
20  color: white;
21  padding: 1rem;
22}
23
24.card-body {
25  padding: 1rem;
26}
27
28.card-footer {
29  padding: 1rem;
30  background: #f5f1e3;
31  border-top: 1px solid #d4af37;
32  align-self: end;
33}

Subgrid vs grille imbriquée classique

La différence essentielle réside dans le partage des pistes :

1/* Grille imbriquée classique - grille INDÉPENDANTE */
2.parent {
3  display: grid;
4  grid-template-columns: 200px 1fr 200px;
5}
6
7.child-normal {
8  grid-column: 1 / -1;
9  display: grid;
10  /* Crée sa propre grille à 3 colonnes, mais les TAILLES peuvent différer */
11  grid-template-columns: 200px 1fr 200px;
12}
13
14/* Subgrid - grille PARTAGÉE */
15.child-subgrid {
16  grid-column: 1 / -1;
17  display: grid;
18  /* Utilise EXACTEMENT les mêmes colonnes que le parent */
19  grid-template-columns: subgrid;
20}

Avec l'imbrication classique, les valeurs 200px de l'enfant et du parent peuvent différer (par exemple à cause du gap). Subgrid garantit une correspondance exacte, car l'enfant utilise littéralement les mêmes lignes de grille que le parent.

Cas d'usage de Subgrid

1. Formulaires avec des libellés alignés

1.form {
2  display: grid;
3  grid-template-columns: 150px 1fr;
4  gap: 0.75rem 1rem;
5}
6
7.form-row {
8  display: grid;
9  grid-column: 1 / -1;
10  grid-template-columns: subgrid;
11  align-items: center;
12}
13
14.form-row label {
15  text-align: right;
16  color: #8b6914;
17}

2. Galerie avec subgrid sur deux axes

1.mosaic {
2  display: grid;
3  grid-template-columns: repeat(4, 1fr);
4  grid-template-rows: repeat(3, 200px);
5  gap: 0.5rem;
6}
7
8.mosaic-item-large {
9  grid-column: span 2;
10  grid-row: span 2;
11  display: grid;
12  grid-template-columns: subgrid;
13  grid-template-rows: subgrid;
14}

Support des navigateurs

Subgrid a obtenu un support complet dans tous les principaux navigateurs en 2023 (Chrome 117, Firefox 71, Safari 16). Tu peux l'utiliser en toute sécurité dans des projets modernes, éventuellement avec une solution de repli :

1.card {
2  display: grid;
3  /* Repli - grille propre */
4  grid-template-rows: auto 1fr auto;
5}
6
7@supports (grid-template-rows: subgrid) {
8  .card {
9    grid-row: span 3;
10    grid-template-rows: subgrid;
11  }
12}

Subgrid est l'un des ajouts les plus importants à CSS Grid, résolvant de réels problèmes d'alignement des éléments dans les grilles imbriquées. Comme la grille précise de blocs de pierre dans la pyramide de Khéops - il assure un alignement parfait à chaque niveau de construction.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>CSS Subgrid</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9    <h1>CSS Subgrid - Galerie des artefacts égyptiens</h1>
10    <div class="gallery">
11        <article class="card">
12            <header class="card-header">Scarabée</header>
13            <div class="card-body">
14                <p>Symbole de la renaissance et de la protection. Les pharaons le portaient comme amulette.</p>
15            </div>
16            <footer class="card-footer">Datation : 1500 av. J.-C.</footer>
17        </article>
18        <article class="card">
19            <header class="card-header">Masque de Toutânkhamon</header>
20            <div class="card-body">
21                <p>Masque funéraire doré du jeune pharaon. Réalisé en plus de 10 kg d'or pur, orné de lapis-lazuli et de turquoise.</p>
22            </div>
23            <footer class="card-footer">Datation : 1323 av. J.-C.</footer>
24        </article>
25        <article class="card">
26            <header class="card-header">Ankh</header>
27            <div class="card-body">
28                <p>La clé de vie - symbole de l'éternité.</p>
29            </div>
30            <footer class="card-footer">Datation : 2000 av. J.-C.</footer>
31        </article>
32    </div>
33</body>
34</html>