subgrid pour aligner les colonnes d’un tableau de réglages imbriqué

grid-template-columns: subgrid; — ce mot-clé résout un problème précis qui revient régulièrement dans les écrans de réglages un peu complexes : aligner les colonnes d’un composant imbriqué sur celles de son composant parent, sans dupliquer la définition de la grille à chaque niveau.

Le cas concret vient d’une extension de gestion de tarification par options, où chaque ligne de réglage principale peut se déplier pour révéler des sous-lignes de variantes. Sans subgrid, chaque sous-ligne devait redéfinir sa propre grille de colonnes, avec le risque constant de désalignement dès qu’un libellé plus long que prévu venait élargir une colonne dans une ligne mais pas dans l’autre.

Le problème d’une grille imbriquée classique

Voici la structure typique d’un composant de réglage avec sous-lignes, organisé avec des grilles CSS Grid indépendantes à chaque niveau :

.ligne-reglage {
    display: grid;
    grid-template-columns: 200px 1fr 120px;
}

.sous-lignes {
    display: grid;
    grid-template-columns: 200px 1fr 120px; /* dupliqué, doit rester synchronisé */
}

Tant que les deux définitions restent identiques, l’alignement visuel fonctionne. Le problème survient dès qu’un développeur modifie l’une des deux grilles, par exemple en élargissant la première colonne de la ligne principale pour accueillir un libellé plus long, sans reporter le même changement dans la grille des sous-lignes. Les colonnes se désalignent alors visuellement, sans qu’aucune erreur ne le signale.

Ce que change subgrid

La valeur subgrid, applicable à grid-template-columns et grid-template-rows, permet à un élément grille enfant d’hériter directement des pistes de colonnes définies par son parent, plutôt que d’en redéfinir de nouvelles. L’alignement devient alors automatique et reste garanti tant que l’enfant est bien positionné dans les colonnes du parent.

.ligne-reglage {
    display: grid;
    grid-template-columns: 200px 1fr 120px;
}

.sous-lignes {
    display: grid;
    grid-column: 1 / -1; /* occupe toute la largeur des colonnes parentes */
    grid-template-columns: subgrid; /* hérite des pistes définies par .ligne-reglage */
}

.sous-ligne {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}

Avec cette structure, toute modification de la largeur des colonnes dans .ligne-reglage se répercute automatiquement sur les sous-lignes, sans qu’il soit nécessaire de synchroniser manuellement deux définitions distinctes. Le résultat visuel reste cohérent même si le contenu d’une sous-ligne varie fortement d’un réglage à l’autre.

Cas d’usage : un tableau de tarification avec variantes

Reprenons l’exemple de départ : une extension de tarification où chaque produit possède une ligne principale (nom, description, prix de base) et peut se déplier pour révéler ses variantes (taille, couleur, supplément de prix). Sans subgrid, chaque variante affichée devait recalculer sa propre largeur de colonne en fonction du contenu le plus large rencontré dans l’ensemble du tableau, un calcul fragile à maintenir en CSS pur.

<div class="ligne-reglage">
    <span>Chaise bistrot</span>
    <span>Modèle pliant en bois massif</span>
    <span>89,00 €</span>
</div>
<div class="sous-lignes">
    <div class="sous-ligne">
        <span>Vernis chêne</span>
        <span>Finition mate</span>
        <span>+ 12,00 €</span>
    </div>
</div>

Ce que subgrid ne remplace pas

Ce mécanisme ne concerne que l’alignement de colonnes dans une structure imbriquée volontairement construite en grille CSS. Il ne s’applique pas à WP_List_Table, dont la structure repose sur des balises <table> HTML classiques et un rendu géré côté PHP, sans grille CSS imbriquée. subgrid vise plutôt les composants de réglage personnalisés, affichés hors du tableau natif d’administration, où le développeur maîtrise entièrement la structure HTML et CSS.

• Réserver subgrid aux composants de réglage sur mesure, pas aux listes gérées par WP_List_Table.
• Vérifier la compatibilité navigateur ciblée avant de s’appuyer exclusivement sur ce mécanisme pour un alignement critique.
• Garder une largeur de repli raisonnable au niveau de la grille parente, car subgrid hérite des pistes mais ne les invente pas.

Le bénéfice réel de subgrid n’est pas visuel dans l’immédiat, il est dans la maintenance : une seule définition de colonnes à faire évoluer, au lieu de plusieurs copies à garder synchronisées.

En résumé

subgrid répond à un problème d’alignement précis et récurrent dans les interfaces d’administration composées de plusieurs niveaux de lignes. Il évite la duplication de définitions de grille et le désalignement silencieux qui en découle, au prix d’une contrainte de structure : l’élément qui en hérite doit occuper les mêmes colonnes que son parent.