Subgrid pour aligner le contenu imbriqué
Utilisez subgrid pour aligner les éléments de grille imbriqués sur les pistes de la grille parente.
Subgrid pour aligner le contenu imbriqué est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Le problème de subgrid
Un défi courant : vous disposez d’une grille de cartes, chacune comportant un en-tête, un corps et un pied de page. Sans subgrid, les éléments de cartes différentes ne peuvent pas s’aligner sur les mêmes lignes de base, car chaque carte constitue une mise en page indépendante.
Qu'est-ce que la sous-grille ?
subgrid est une valeur de grid-template-columns ou de grid-template-rows qui permet à une grille imbriquée d’hériter des définitions des pistes de la grille parente et d’y participer.
grid-template-rows: subgrid
Un élément de grille qui est également un conteneur de grille peut utiliser subgrid pour aligner ses enfants sur les pistes de la grille parente :
<div class="card-grid">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div>
</div>grid-template-columns: subgrid
De même, appliquer la sous-grille aux colonnes permet aux éléments imbriqués de s’aligner sur les pistes des colonnes parentes — ce qui est utile pour aligner des paires étiquette-valeur ou des champs de formulaire entre plusieurs colonnes de cartes.
Sous-grille ou alignement du contenu
Sans sous-grille, vous pouvez aligner partiellement le contenu à l’aide de align-content ou de hauteurs fixes, mais cette solution est fragile. La sous-grille permet un véritable alignement fondé sur les hauteurs réelles du contenu.
La sous-grille pour aligner les formulaires
Alignement de paires étiquette-champ entre plusieurs colonnes de formulaire :
<div class="form-grid">
<div class="form-section">
<label>Name</label><input placeholder="Name" />
<label>Email</label><input placeholder="Email" />
</div>
</div>La sous-grille s’étend sur les lignes et les colonnes
Une sous-grille peut s’étendre sur plusieurs pistes parentes et hériter des pistes dans les deux directions :
<div class="layout"><div class="feature">Feature spans grid</div></div>Zones nommées avec une sous-grille
Lorsqu’une sous-grille hérite des pistes nommées de la grille parente, ces noms sont disponibles pour le positionnement à l’intérieur du conteneur de la sous-grille.
Héritage des espacements
Les sous-grilles héritent par défaut des valeurs de gap de la grille parente. La grille imbriquée participe au même système de gouttières.
À propos de la prise en charge par les navigateurs
La sous-grille est disponible dans Firefox depuis 2019. Chrome l’a prise en charge en 2023. Tous les navigateurs modernes la prennent désormais en charge. Vérifiez la prise en charge destinée à votre public cible avant de l’utiliser en production.
Amélioration progressive avec une sous-grille
Prévoyez une solution de repli pour les navigateurs plus anciens en utilisant des hauteurs fixes ou l’alignement Flexbox avant d’ajouter la sous-grille comme amélioration :
<div class="card-grid"><div class="card">Card content</div></div>Vérification rapide
Que fait grid-template-rows: subgrid lorsqu’il est appliqué à un élément de grille ?
Récapitulatif
La sous-grille résout le problème d’alignement du contenu de grilles imbriquées, par exemple lorsque des éléments de cartes distinctes doivent s’aligner sur la même ligne de base. Utilisez grid-template-rows: subgrid sur les éléments de grille qui s’étendent sur plusieurs lignes, et grid-template-columns: subgrid pour le contenu imbriqué aligné sur les colonnes. La prise en charge par les navigateurs modernes est désormais généralisée.
Questions Fréquemment Posées
La leçon « Subgrid pour aligner le contenu imbriqué » est-elle gratuite ?
Oui — le texte complet de « Subgrid pour aligner le contenu imbriqué » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Subgrid pour aligner le contenu imbriqué » ?
Utilisez subgrid pour aligner les éléments de grille imbriqués sur les pistes de la grille parente. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Subgrid pour aligner le contenu imbriqué » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Lignes et zones de grille nommées
- Auto-fit et auto-fill avec minmax
- Grille implicite et Grid-Auto-Flow
- Subgrid pour aligner le contenu imbriqué