Grille implicite et Grid-Auto-Flow
Comprenez comment CSS Grid gère les éléments qui dépassent les pistes explicites avec des lignes et des colonnes implicites.
Grille implicite et Grid-Auto-Flow est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Grille explicite et grille implicite
La grille explicite est définie par grid-template-columns et grid-template-rows. Lorsque des éléments débordent au-delà de ces pistes définies, le navigateur crée automatiquement des pistes implicites.
grid-auto-rows
Définit la taille des pistes de lignes créées implicitement. Sans cette propriété, les lignes implicites sont dimensionnées pour s’adapter à leur contenu (auto).
<div class="gallery">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>grid-auto-rows avec minmax
Donnez aux lignes implicites une hauteur minimale tout en leur permettant de s’agrandir :
<div class="feed">
<div>1</div><div>2</div><div>3</div>
</div>grid-auto-columns
Définit la taille des pistes de colonnes implicites lorsque des éléments sont placés en dehors de la plage explicite de colonnes :
<div class="timeline">
<div>Event 1</div><div>Event 2</div>
</div>grid-auto-flow
Contrôle la manière dont l’algorithme de placement automatique positionne les éléments :
row(par défaut) — placement par lignes, avec ajout de nouvelles lignes si nécessairecolumn— placement par colonnes, avec ajout de nouvelles colonnesrow dense— remplissage intensif des espaces vides par retour en arrièrecolumn dense— remplissage dense dans le sens des colonnes
grid-auto-flow: dense
dense demande à l’algorithme d’essayer de remplir les trous laissés par les éléments qui s’étendent sur plusieurs pistes. Cela peut faire apparaître les éléments dans un ordre différent de l’ordre initial.
<div class="masonry">
<div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
</div>Modèle de colonnes avec placement automatique
Une bande de cartes à défilement horizontal où les colonnes s’ajoutent selon les besoins :
<div class="strip">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>Remplissage dense pour une galerie
Une galerie de photos de tailles variées qui comble les espaces vides :
<div class="gallery">
<div class="wide">Wide</div>
<div class="tall">Tall</div>
<div>3</div><div>4</div>
</div>Grille implicite et zones nommées
Les zones nommées s’appliquent uniquement à la grille explicite. Les éléments placés dans la grille implicite ne peuvent pas utiliser directement un placement par zone nommée : ils nécessitent un placement par numéro de ligne ou par span.
Visualiser la grille implicite
Dans les DevTools de Chrome, la superposition de mise en page affiche à la fois les lignes de grille explicites (continues) et implicites (en pointillés). Cela vous aide à comprendre où les éléments placés automatiquement sont positionnés.
Contrôler la taille implicite de chaque élément
Les éléments qui s’étendent sur plusieurs lignes de la grille implicite ont besoin de grid-auto-rows pour être dimensionnés correctement. Sans cette propriété, les lignes implicites s’adaptent au contenu, ce qui peut créer des mises en page irrégulières.
Vérification rapide
Que fait grid-auto-flow: row dense ?
Récapitulatif
La grille implicite étend la grille explicite avec des pistes créées automatiquement. grid-auto-rows/columns contrôle leur taille ; minmax() les rend flexibles. grid-auto-flow définit la direction du placement. Le remplissage dense comble intensivement les espaces vides — ce qui est utile pour les mises en page de type maçonnerie, mais peut perturber l’ordre visuel.
Questions Fréquemment Posées
La leçon « Grille implicite et Grid-Auto-Flow » est-elle gratuite ?
Oui — le texte complet de « Grille implicite et Grid-Auto-Flow » 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 « Grille implicite et Grid-Auto-Flow » ?
Comprenez comment CSS Grid gère les éléments qui dépassent les pistes explicites avec des lignes et des colonnes implicites. 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 3 sur 4.
Combien de temps prend la leçon « Grille implicite et Grid-Auto-Flow » ?
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é