Pourquoi Subgrid change la manière de penser les layouts CSS
CSS Grid a profondément amélioré la façon dont nous construisons des interfaces web complexes. Là où Flexbox excelle pour répartir des éléments sur un axe, Grid permet de définir une structure bidimensionnelle claire : colonnes, lignes, espacements, zones nommées. Pourtant, un problème revient souvent dans les interfaces réelles : comment aligner les éléments internes de plusieurs composants sans dupliquer toute la grille à l’intérieur de chacun ?
C’est précisément le rôle de subgrid. Cette valeur permet à un élément enfant qui est lui-même une grille d’hériter des pistes de grille de son parent. Autrement dit, ses colonnes ou ses lignes peuvent s’aligner sur celles de la grille extérieure, sans devoir recalculer les mêmes grid-template-columns ou bricoler avec des marges.
Cette fonctionnalité est particulièrement utile pour les cartes, les listes de produits, les formulaires, les pages éditoriales et les interfaces d’administration. Elle complète très bien des techniques déjà abordées dans les container queries CSS et dans les cascade layers CSS, car elle aide à concevoir des composants plus autonomes sans perdre la cohérence globale de la mise en page.
Le problème classique : des cartes qui ne s’alignent pas
Imaginons une liste de cartes. Chaque carte contient une image, un titre, une description et une zone d’actions. Visuellement, nous voulons que les titres soient alignés, que les descriptions commencent au même niveau et que les boutons restent en bas.
Avec une approche classique, chaque carte devient une petite grille indépendante :
<section class="cards">
<article class="card">
<img src="course.jpg" alt="" />
<h2>Formation JavaScript</h2>
<p>Apprenez les bases modernes du langage.</p>
<a href="/formations/javascript">Voir la formation</a>
</article>
<article class="card">
<img src="typescript.jpg" alt="" />
<h2>TypeScript avancé</h2>
<p>Structurez vos applications avec un typage plus fiable et maintenable.</p>
<a href="/formations/typescript">Voir la formation</a>
</article>
</section>
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.5rem;
}
.card {
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: 0.75rem;
padding: 1rem;
border: 1px solid hsl(220 10% 85%);
border-radius: 0.75rem;
}
Ce code fonctionne, mais chaque carte définit ses propres lignes. Si un titre passe sur deux lignes dans une carte et pas dans l’autre, les descriptions ne commencent plus forcément au même niveau. Le layout reste correct, mais l’alignement global peut devenir moins net.
Utiliser Subgrid sur les lignes
Avec subgrid, le conteneur parent peut définir les lignes communes, puis chaque carte peut s’y rattacher. Cela permet aux contenus internes des cartes de partager une même structure verticale.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
grid-auto-rows: auto auto 1fr auto;
gap: 1.5rem;
}
.card {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid hsl(220 10% 85%);
border-radius: 0.75rem;
}
La propriété importante est ici :
grid-template-rows: subgrid;
Elle indique que les lignes de la carte ne sont pas définies localement, mais reprises depuis la grille parente. Le grid-row: span 4 précise que chaque carte occupe quatre lignes de la grille extérieure : image, titre, description, action.
Cette approche évite de dupliquer une logique de layout dans chaque composant. Elle rend aussi les différences de contenu plus faciles à absorber. Une description plus longue peut s’étendre naturellement, tandis que les zones d’action restent alignées.
Subgrid sur les colonnes : le cas des formulaires
Subgrid n’est pas limité aux lignes. Il peut aussi être très utile sur les colonnes, notamment dans les formulaires. Prenons un formulaire où les labels, champs et messages d’aide doivent rester alignés.
<form class="settings-form">
<div class="field">
<label for="name">Nom</label>
<input id="name" name="name" type="text" />
<p>Votre nom public sur le site.</p>
</div>
<div class="field">
<label for="email">Email</label>
<input id="email" name="email" type="email" />
<p>Utilisé uniquement pour les notifications importantes.</p>
</div>
</form>
.settings-form {
display: grid;
grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
gap: 1rem 1.5rem;
}
.field {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: start;
}
.field label {
grid-column: 1;
}
.field input,
.field p {
grid-column: 2;
}
.field p {
margin: 0.25rem 0 0;
color: hsl(220 8% 40%);
font-size: 0.9rem;
}
Ici, chaque .field occupe toute la largeur du formulaire, mais ses colonnes sont celles du parent. Le label se place dans la première colonne, le champ et l’aide dans la seconde. Vous obtenez un alignement robuste sans devoir recopier grid-template-columns dans chaque ligne du formulaire.
Pour des formulaires complexes, cette approche s’accorde très bien avec les principes présentés dans les formulaires accessibles. Elle permet de préserver une structure HTML simple tout en obtenant une mise en page précise.
Ne pas confondre Subgrid et imbrication classique
Une grille imbriquée classique crée son propre système de colonnes et de lignes. C’est utile quand le composant doit être totalement indépendant. Subgrid, au contraire, est pertinent quand le composant doit rester aligné avec une structure extérieure.
Utilisez une grille imbriquée classique lorsque le composant a sa propre logique interne : une galerie, un calendrier, un panneau de statistiques. Utilisez subgrid lorsque plusieurs composants voisins doivent partager un même rythme visuel : cartes, lignes de formulaire, tableaux éditoriaux, sections comparatives.
Cette distinction est importante en architecture frontend. Un composant n’est pas toujours une île totalement indépendante. Il peut être autonome dans son comportement, mais dépendre d’un système de layout supérieur. Subgrid permet justement de modéliser cette dépendance sans ajouter de divs inutiles ni de classes de correction.
Responsive design avec Subgrid
Subgrid devient encore plus intéressant lorsqu’il est combiné avec des media queries ou des container queries. Par exemple, un formulaire peut passer d’une seule colonne sur mobile à deux colonnes sur écran plus large :
.settings-form {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.field {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
}
@media (min-width: 48rem) {
.settings-form {
grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
gap: 1rem 1.5rem;
}
}
Sur mobile, la grille ne contient qu’une colonne. Les champs s’empilent naturellement. Sur écran plus large, les mêmes éléments héritent automatiquement de la nouvelle structure à deux colonnes.
Si le layout dépend de la largeur d’un composant plutôt que de celle de la fenêtre, vous pouvez remplacer la media query par une container query. L’idée reste la même : le parent définit la grille pertinente, les enfants utilisent subgrid pour s’y aligner.
Bonnes pratiques d’utilisation
Première règle : n’utilisez pas subgrid partout. Comme toute abstraction de layout, elle devient utile lorsqu’elle résout un problème réel d’alignement. Si une simple grille locale suffit, gardez une grille locale.
Deuxième règle : nommez clairement vos composants et limitez la profondeur. Subgrid est très lisible sur un niveau d’imbrication. Sur trois ou quatre niveaux, il peut devenir difficile de comprendre quelle grille contrôle réellement les pistes.
Troisième règle : testez avec du contenu réaliste. Un layout peut sembler parfait avec trois titres courts et trois descriptions de même longueur. Ajoutez des textes longs, des traductions, des champs optionnels, des erreurs de formulaire et des contenus absents. C’est souvent dans ces cas que subgrid montre sa valeur.
Quatrième règle : gardez l’accessibilité indépendante du layout. Ne modifiez pas l’ordre HTML uniquement pour satisfaire la grille. L’ordre du DOM doit rester logique pour la navigation clavier, les lecteurs d’écran et le référencement. Cette logique rejoint les principes de progressive enhancement : le contenu doit rester compréhensible avant même l’amélioration visuelle.
Un exemple avec design tokens
Dans un projet plus structuré, les espacements et tailles peuvent venir de variables CSS ou de design tokens. Cela rend la grille plus cohérente avec le reste de l’interface :
:root {
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--radius-card: 0.75rem;
--color-border: hsl(220 10% 85%);
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
grid-auto-rows: auto auto 1fr auto;
gap: var(--space-6);
}
.card {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
}
Cette approche s’intègre naturellement dans un système de design tokens, comme celui présenté dans design tokens en CSS et TypeScript. Subgrid ne remplace pas les tokens : il les complète en donnant une structure plus stable aux espacements et aux alignements.
Conclusion
CSS Subgrid est une fonctionnalité discrète, mais très puissante. Elle ne sert pas à créer des effets spectaculaires. Elle sert à résoudre un problème plus fondamental : garder une cohérence d’alignement entre des composants imbriqués sans sacrifier la sémantique HTML ni multiplier les styles dupliqués.
Pour des cartes, des formulaires, des grilles éditoriales ou des interfaces d’administration, subgrid permet de construire des layouts plus propres, plus prévisibles et plus faciles à maintenir. C’est une brique importante du CSS moderne, au même titre que les container queries, les cascade layers et les design tokens.