Subgrid CSS : maîtrisez les grilles imbriquées facilement

Quand on commence à travailler sérieusement avec CSS Grid, tout semble presque magique. Les lignes, les colonnes, l’alignement… enfin un outil pensé pour faire de vraies mises en page modernes. Puis, très vite, une frustration arrive. Vous créez une grille principale, puis une grille à l’intérieur, et là, tout se décale. Les colonnes ne s’alignent plus comme prévu. Heureusement, subgrid CSS arrive à la rescousse !

• Comprendre pourquoi certaines mises en page en CSS Grid se désalignent, et comment retrouver une cohérence visuelle propre sans bricolage ni calculs complexes
• Savoir quand subgrid CSS apporte une vraie valeur dans un projet, pour concevoir des grilles imbriquées plus lisibles, plus stables et plus faciles à maintenir
• Comprendre les layouts modernes en adoptant une méthode claire pour structurer ses grilles dès le départ et éviter les pièges courants du CSS

C’est à ce moment-là que beaucoup de développeurs Frontend, débutants comme confirmés, se disent qu’ils ont raté quelque chose. En réalité, ce “quelque chose” n’existait pas encore… jusqu’à l’arrivée de subgrid CSS.

Subgrid CSS est une évolution discrète mais puissante de CSS Grid. Elle ne révolutionne pas la mise en page, elle la rend cohérente. Et surtout, elle répond à un problème réel que vous avez probablement déjà rencontré.

Qu’est-ce que subgrid CSS exactement ?

Pour comprendre subgrid CSS, il faut repartir d’une idée simple. Avec CSS Grid, vous définissez une grille sur un conteneur parent. Cette grille a des lignes et des colonnes bien précises. Jusque-là, tout va bien.

Le problème apparaît dès que vous créez un élément enfant qui devient lui-même une grille. Par défaut, cette nouvelle grille est indépendante. Elle ne connaît rien de la grille parente. Résultat, les colonnes de l’enfant ne tombent pas en face de celles du parent, même si visuellement, vous aimeriez qu’elles s’alignent parfaitement.

C’est là que subgrid CSS entre en jeu. Subgrid permet à une grille enfant d’hériter directement des lignes ou des colonnes de la grille parente. Autrement dit, la grille imbriquée utilise la structure de la grille principale, au lieu de recréer la sienne dans son coin.

On peut le dire simplement : subgrid CSS permet de partager une grille entre plusieurs niveaux de mise en page.

Pourquoi subgrid CSS est-il si utile ?

Avant subgrid CSS, il fallait souvent ruser. Vous dupliquiez les mêmes définitions de colonnes sur plusieurs niveaux. Vous ajustiez à la main. Vous croisiez les doigts pour que tout reste aligné quand le contenu change.

Subgrid CSS évite ces bricolages. Il garantit un alignement parfait, même quand le HTML devient complexe. C’est particulièrement utile pour des mises en page avec des cartes, des listes, des articles, des tableaux visuels ou des interfaces riches.

Imaginez une page avec une grille principale qui structure toute la largeur. À l’intérieur, chaque carte contient un titre, une image et un texte.

• Sans subgrid CSS, chaque carte gère son propre alignement.
• Avec subgrid CSS, toutes les cartes respectent exactement la même grille.

Le rendu devient plus propre, plus lisible et beaucoup plus professionnel.

À quoi sert subgrid CSS dans un projet réel ?

Subgrid CSS sert avant tout à créer de la cohérence visuelle. Il est pensé pour les projets où l’alignement compte vraiment. Pas seulement pour faire “joli”, mais pour améliorer la lisibilité et l’expérience utilisateur.

On le retrouve souvent dans des layouts éditoriaux, comme des blogs, des magazines en ligne ou des pages de documentation. Il est aussi très utile dans des interfaces d’administration, où les colonnes doivent rester strictement alignées, même quand les composants sont imbriqués.

Pour mieux comprendre, prenez l’exemple d’un développeur qui a passé des heures à essayer d’aligner les titres et les extraits d’articles sur plusieurs cartes. Tout semblait correct… jusqu’à ce qu’un article ait un titre plus long que les autres. Avec subgrid CSS, ce genre de problème disparaît. Les cartes s’adaptent sans casser l’alignement global.

Subgrid CSS est-il fait pour les débutants ?

La bonne nouvelle, c’est que oui. Même si le mot “subgrid” peut impressionner, le concept est finalement assez simple. Si vous comprenez les bases de CSS Grid, vous êtes déjà sur la bonne voie.

Subgrid CSS ne remplace pas CSS Grid. Il vient compléter son fonctionnement. Vous continuez à définir une grille parente, puis vous indiquez à la grille enfant qu’elle doit utiliser celle du parent. C’est tout.

Bien sûr, comme toute nouveauté CSS, il faut prendre le temps de comprendre quand l’utiliser. Ce n’est pas un outil à sortir à chaque mise en page. Mais dans les bons cas, il simplifie énormément le code et évite des erreurs difficiles à corriger plus tard.

Quand utiliser subgrid CSS (et quand l’éviter)

Avant de plonger dans le code, il est important de répondre à une question simple : est-ce que subgrid CSS est toujours utile ? La réponse est non, et c’est une très bonne chose.

Subgrid CSS est pertinent quand vous avez une grille principale cohérente, et que des éléments imbriqués doivent respecter exactement cette structure. Si vos grilles enfants n’ont aucun lien visuel entre elles, subgrid CSS n’apporte rien.

En revanche, dès que vous voulez aligner des contenus situés à différents niveaux du HTML, subgrid CSS devient un allié précieux. C’est souvent le cas dans des listes d’articles, des cartes produits, des comparatifs ou des interfaces structurées en colonnes fixes.

À l’inverse, si chaque composant est totalement indépendant, avec sa propre logique de mise en page, mieux vaut rester sur une grille classique. Subgrid CSS n’est pas un remplacement universel de CSS Grid, mais une extension pensée pour un besoin très précis.

Comment fonctionne subgrid CSS concrètement ?

Revenons à la base. Une grille CSS classique fonctionne avec display: grid, puis une définition de colonnes et de lignes. Par exemple, trois colonnes égales.

Avec subgrid CSS, le principe change légèrement. L’élément enfant devient une grille, mais au lieu de définir ses propres colonnes ou lignes, il dit simplement : “je reprends celles de mon parent”.

Techniquement, cela se fait avec la valeur subgrid sur grid-template-columns ou grid-template-rows.

Ce détail est important. Subgrid CSS peut fonctionner sur les colonnes, sur les lignes, ou sur les deux, selon le besoin. Vous n’êtes pas obligé de tout hériter.

Premier exemple simple sans subgrid CSS

Commençons volontairement par un exemple qui pose problème, afin de bien comprendre l’intérêt de subgrid CSS.

Imaginons une liste d’articles. Chaque article est une carte avec un titre et un texte. Le conteneur principal utilise CSS Grid pour organiser la page.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 20px;
}

Chaque carte devient ensuite une grille à son tour.

.card {
  display: grid;
  grid-template-columns: 1fr;
}

Visuellement, tout fonctionne. Mais si vous ajoutez une image ou un sous-élément dans la carte, les alignements ne correspondent plus à la grille principale. Chaque carte vit sa propre vie.

C’est ici que beaucoup de débutants se sentent bloqués. Ils essaient de copier les mêmes colonnes, de jouer avec des marges, ou d’ajouter des calculs inutiles.

Le même exemple avec subgrid CSS

Maintenant, faisons la même chose, mais avec subgrid CSS.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 20px;
}

.card {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

Ce code mérite qu’on s’y arrête.

• Le conteneur définit toujours la grille principale. Rien ne change à ce niveau.
• La carte devient une grille, mais au lieu de redéfinir ses colonnes, elle utilise subgrid.
• Enfin, grid-column: span 3 permet à la carte d’occuper toute la largeur de la grille parente.

Résultat, tous les éléments internes à la carte sont parfaitement alignés sur les colonnes du parent. Plus besoin de calculer. Plus besoin de dupliquer la logique.

Comprendre grid-column avec subgrid CSS

Ce point est souvent source de confusion, surtout quand on débute. Pour qu’un élément puisse utiliser subgrid CSS, il doit s’étendre sur plusieurs colonnes ou lignes du parent.

C’est logique. Si l’élément enfant n’occupe qu’une seule colonne, il n’a rien à hériter.

C’est pour cette raison que grid-column: span X est presque toujours utilisé avec subgrid CSS. Il indique à la grille enfant quelle portion de la grille parente elle utilise.

Sans cette règle, subgrid CSS ne peut pas fonctionner correctement.

Subgrid CSS sur les lignes

Jusqu’ici, nous avons parlé des colonnes. Mais subgrid CSS peut aussi fonctionner sur les lignes, ce qui est parfois encore plus puissant.

Prenons un exemple avec des cartes qui doivent toutes avoir un titre aligné, même si leur contenu est plus ou moins long.

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
}

Dans ce cas, les lignes de chaque carte suivent exactement celles du conteneur principal. Les titres tombent au même endroit, les pieds de cartes aussi. L’interface devient immédiatement plus lisible.

Exemple complet de subgrid CSS

SANS subgrid CSS : Colonnes clairement décalées (volontairement)

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Sans subgrid – décalé</title>
<style>
body {
  font-family: Arial, sans-serif;
  padding: 40px;
  background: #f5f5f5;
}

/* GRILLE PARENTE */
.wrapper {
  display: grid;
  grid-template-columns: 200px 2fr 1fr;
  gap: 20px;
  background: #fff;
  padding: 20px;
}

/* CARTE */
.card {
  grid-column: span 3;
  display: grid;

  /* ❌ colonnes DIFFERENTES du parent */
  grid-template-columns: 120px 1fr 2fr;

  border: 3px dashed red;
}

/* BLOCS */
.box {
  padding: 25px;
  color: white;
  font-weight: bold;
  text-align: center;
}

.image { background: #3498db; }
.title { background: #f39c12; }
.text  { background: #27ae60; }

/* lignes du parent visibles */
.wrapper::before {
  content: "";
  grid-column: 1 / -1;
  height: 0;
  border-top: 2px dashed #999;
}
</style>
</head>
<body>

<h2>Sans subgrid : colonnes décalées</h2>

<div class="wrapper">
  <div class="card">
    <div class="box image">Image</div>
    <div class="box title">Titre</div>
    <div class="box text">Texte</div>
  </div>
</div>

</body>
</html>

• La colonne Image ne tombe pas sous la colonne du parent
• Le Titre est trop large
• Le Texte déborde visuellement

Chaque carte décide seule de sa grille → incohérence visible. Même si “ça fonctionne”, le rendu est bancal.

AVEC subgrid CSS : Alignement parfait, impossible à rater.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Avec subgrid – aligné</title>
<style>
body {
  font-family: Arial, sans-serif;
  padding: 40px;
  background: #f5f5f5;
}

/* GRILLE PARENTE */
.wrapper {
  display: grid;
  grid-template-columns: 200px 2fr 1fr;
  gap: 20px;
  background: #fff;
  padding: 20px;
}

/* CARTE */
.card {
  grid-column: span 3;
  display: grid;

  /* ✅ hérite EXACTEMENT des colonnes du parent */
  grid-template-columns: subgrid;

  border: 3px dashed green;
}

/* BLOCS */
.box {
  padding: 25px;
  color: white;
  font-weight: bold;
  text-align: center;
}

.image { background: #3498db; }
.title { background: #f39c12; }
.text  { background: #27ae60; }
</style>
</head>
<body>

<h2>Avec subgrid : alignement parfait</h2>

<div class="wrapper">
  <div class="card">
    <div class="box image">Image</div>
    <div class="box title">Titre</div>
    <div class="box text">Texte</div>
  </div>
</div>

</body>
</html>

• Les trois blocs tombent pile sous les colonnes du parent
• Impossible de “tricher” ou de se décaler
• Même structure, même HTML, un seul mot change : subgrid

Sans subgrid, chaque composant invente sa propre grille.
Avec subgrid, le parent impose les règles.

C’est exactement ce que montre cette démo

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Compatibilité navigateur de subgrid CSS

C’est une question légitime, surtout quand on débute. Subgrid CSS est aujourd’hui bien supporté par les navigateurs modernes, notamment Firefox et les versions récentes de Chrome et Safari.

Cependant, si vous travaillez sur un projet très ancien ou avec des contraintes de compatibilité fortes, il est important de vérifier le support avant de l’utiliser en production.

La bonne pratique consiste à considérer subgrid CSS comme une amélioration progressive. Si le navigateur le supporte, tant mieux. Sinon, la mise en page reste fonctionnelle, même si elle est un peu moins raffinée.

Dès à présent, vous devriez comprendre pourquoi subgrid CSS existe et dans quels cas il prend tout son sens. Ce n’est pas un gadget, mais une réponse élégante à un problème récurrent en CSS.

Exemple concret : une liste d’articles alignée proprement

Imaginons une page classique de blog. Vous avez une liste d’articles, chacun avec une image, un titre, une date et un extrait. Visuellement, vous voulez que tous les titres soient parfaitement alignés, même si les images n’ont pas exactement la même hauteur.

Sans subgrid CSS, ce genre de mise en page devient vite pénible. Avec subgrid CSS, la logique est beaucoup plus naturelle. Commençons par la grille principale.

.articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 24px;
}

Ici, rien de nouveau. Trois colonnes, un espace confortable entre les cartes.

Chaque article est ensuite une carte qui va utiliser la grille parente.

.article {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

Ce code peut sembler étrange au début. Pourtant, il est très logique. La carte dit simplement qu’elle reprend les lignes de la grille parente. Elle s’étend sur plusieurs lignes, ce qui permet à subgrid CSS de fonctionner.

À l’intérieur, vous pouvez placer vos éléments sans vous soucier de l’alignement global.

.article img {
  width: 100%;
  height: auto;
}

.article h2 {
  font-size: 1.2rem;
}

.article p {
  color: #555;
}

Résultat, même si une image est plus haute qu’une autre, les titres et les textes restent alignés visuellement sur toute la page. Le rendu est beaucoup plus propre, presque “éditorial”.

Comprendre ce qui se passe réellement

Prenons un instant pour vulgariser ce mécanisme. La grille principale définit un cadre. Subgrid CSS permet aux cartes de se caler exactement sur ce cadre, sans recréer leur propre système.

C’est un peu comme si vous dessiniez des lignes au sol, et que chaque meuble devait obligatoirement s’aligner dessus. Peu importe la taille du meuble, sa position reste cohérente avec les autres.

C’est cette cohérence qui fait toute la différence dans une interface bien pensée.

Exemple avec une mise en page en deux niveaux

Subgrid CSS révèle vraiment son potentiel quand les niveaux de grille s’accumulent. Prenons un layout avec une sidebar et un contenu principal.

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 32px;
}

Dans la colonne principale, vous avez une liste de sections.

.content {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
}

Chaque section hérite alors des colonnes définies au niveau de la page. Vous pouvez structurer votre contenu avec des blocs internes sans jamais perdre l’alignement global.

C’est particulièrement utile pour des pages de documentation ou de formation, où la lisibilité est primordiale.

Les erreurs courantes avec subgrid CSS

Quand on découvre subgrid CSS, certaines erreurs reviennent souvent. La première consiste à oublier que l’élément doit s’étendre sur plusieurs lignes ou colonnes. Sans cela, subgrid CSS ne peut rien faire.

Une autre erreur fréquente est de vouloir tout transformer en subgrid. Ce n’est pas nécessaire. Subgrid CSS doit rester ciblé. Utilisez-le là où l’alignement est important, pas partout.

Enfin, certains débutants pensent que subgrid CSS fonctionne comme inherit. Ce n’est pas exactement le cas. Subgrid hérite de la structure, pas des styles. Les tailles, les couleurs et les espacements restent à définir normalement.

Bonnes pratiques pour utiliser subgrid CSS sereinement

La meilleure façon d’utiliser subgrid CSS est de penser votre layout en amont. Commencez par définir une grille principale claire. Ensuite, identifiez les zones qui doivent absolument rester alignées.

Appliquez subgrid CSS uniquement à ces zones. Votre code sera plus lisible et plus facile à maintenir.

Une bonne habitude consiste aussi à commenter légèrement votre CSS au début. Cela aide énormément quand vous revenez sur un projet plusieurs mois plus tard.

Subgrid CSS et performance

Bonne nouvelle, subgrid CSS n’a pas d’impact négatif notable sur les performances. Au contraire, il peut même simplifier votre code, ce qui réduit les calculs inutiles et les ajustements manuels.

Moins de hacks, moins de règles redondantes, et donc moins de risques de bugs visuels.

Intégrer subgrid CSS dans un projet réel

Quand on découvre subgrid CSS, la tentation est grande de vouloir l’utiliser immédiatement partout. Pourtant, dans un projet réel, l’approche la plus saine est plus progressive. Subgrid CSS n’est pas une solution magique à tous les problèmes de mise en page, mais un outil précis pour des besoins précis.

La première étape consiste toujours à concevoir une grille principale solide. Prenez le temps de réfléchir à votre structure globale. Où sont les colonnes importantes ? Quels éléments doivent rester alignés, quoi qu’il arrive ? Ce travail de réflexion, souvent négligé, fait déjà une énorme différence.

Une fois cette grille définie, subgrid CSS devient presque évident. Vous repérez rapidement les composants imbriqués qui doivent suivre cette structure. Des cartes d’articles, des blocs de contenu, des sections répétées… Ce sont souvent les mêmes suspects.

L’erreur classique serait de partir du composant et de “remonter” vers la grille. Avec subgrid CSS, c’est l’inverse. On part de la grille globale, puis on autorise certains éléments à s’y accrocher.

Subgrid CSS change subtilement la façon de penser le CSS. On ne raisonne plus uniquement en composants indépendants, mais en système cohérent. Cela peut surprendre au début, surtout quand on apprend le CSS de manière progressive.

Mais c’est aussi ce qui rend subgrid CSS intéressant. Il pousse à structurer proprement son HTML, à éviter les imbrications inutiles et à réfléchir à l’architecture globale d’une page.

Avec le temps, on se rend compte que beaucoup de problèmes CSS ne viennent pas du langage lui-même, mais d’une structure mal pensée. Subgrid CSS n’efface pas ces problèmes, mais il encourage à les anticiper.

Faut-il avoir peur de subgrid CSS quand on débute ?

Absolument pas. Même si vous débutez, subgrid CSS peut devenir un excellent exercice de compréhension de CSS Grid. Il vous force à comprendre ce que sont vraiment les lignes, les colonnes et les zones.

L’important est de ne pas vouloir aller trop vite. Commencez par des exemples simples. Testez, cassez, recommencez. Le CSS s’apprend beaucoup par l’expérimentation, et subgrid CSS ne fait pas exception.

Si un jour vous vous surprenez à dire “tout est enfin aligné sans bidouille”, alors vous saurez que vous êtes sur la bonne voie.

Subgrid CSS est une avancée majeure

Subgrid CSS n’ajoute pas des dizaines de nouvelles propriétés. Il n’apporte pas de syntaxe compliquée. Et pourtant, il comble un manque historique de CSS Grid.

Pendant longtemps, les développeurs ont dû choisir entre des grilles rigides ou des composants souples mais désalignés. Subgrid CSS réconcilie ces deux mondes. Il permet de créer des interfaces complexes, lisibles et maintenables, sans multiplier les exceptions.

C’est souvent ce genre d’évolution discrète qui fait mûrir un langage. Subgrid CSS ne fait pas de bruit, mais il améliore profondément la qualité des mises en page modernes.

Subgrid CSS n’est pas un outil spectaculaire, et c’est justement ce qui fait sa force. Il ne cherche pas à impressionner, il cherche à résoudre un problème concret que vous avez probablement déjà rencontré sans savoir comment le nommer. L’alignement, la cohérence, la lisibilité… tout ce qui fait qu’une interface paraît “juste”.

En apprenant à utiliser subgrid CSS, vous ne faites pas qu’ajouter une corde à votre arc. Vous changez légèrement votre façon de concevoir vos mises en page. Vous passez d’un empilement de solutions à une vision d’ensemble, plus propre et plus durable.

Si vous deviez retenir une seule chose, ce serait celle-ci : subgrid CSS n’est pas là pour compliquer votre CSS, mais pour vous éviter de le compliquer vous-même. Prenez le temps de l’apprivoiser, testez-le sur de petits projets, et vous verrez qu’il deviendra rapidement un réflexe naturel dans vos mises en page avancées.

Quand le CSS devient lisible, cohérent et agréable à maintenir, ce n’est jamais un hasard. Subgrid CSS y contribue, discrètement mais efficacement.

Découvrez notre Template responsive d’une page web avec grid CSS !

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr