Conteneur Grid CSS
L’intro Grid a transformé les parents en grilles. Cette leçon reste sur le conteneur : définir les pistes, poser gap, aligner les items dans les cellules, et packer la grille quand il reste de l’espace libre. Le span des items et les zones nommées attendent Grid Items et Grid Areas.
Une boîte à outils du conteneur grid
📊 Conteneur grid en un coup d’œil
| Propriété | Travail quotidien |
|---|---|
grid-template-columns |
Définit les tailles des pistes de colonnes |
grid-template-rows |
Définit les tailles des pistes de lignes |
gap |
Gouttières entre les pistes |
justify-items / align-items |
Aligne chaque item dans sa cellule (axe inline / block) |
justify-content / align-content |
Positionne toute la grille quand elle est plus petite que le conteneur |
grid-auto-flow |
Contrôle l’ordre de placement auto (row ou column) |
Dessinez d’abord les pistes. Puis décidez comment les cellules alignent leur contenu, et seulement ensuite comment l’espace restant autour de toute la grille doit se comporter.
Pistes de modèle — colonnes et lignes
grid-template-columns et grid-template-rows esquissent la grille. Mélangez fr, longueurs et repeat() pour les tableaux du quotidien.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
min-height: 16rem;
}
gap — garder des gouttières honnêtes
gap (ou row-gap / column-gap) espace les pistes sans bricolages de margin sur chaque enfant.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 1.25rem;
}
justify-items et align-items — dans la cellule
Ces propriétés alignent chaque item dans sa cellule. justify-items sur l’axe inline ; align-items sur l’axe block. Ne les confondez pas avec le packing du contenu.
.board {
display: grid;
grid-template-columns: repeat(2, 8rem);
justify-items: center;
align-items: center;
gap: 0.75rem;
}
justify-content et align-content — packer la grille
Quand les pistes sont plus petites que le conteneur, les propriétés content glissent ou espacent toute la grille. Utile pour des planches d’icônes qui ne doivent pas s’étirer sans fin.
.board {
display: grid;
grid-template-columns: repeat(3, 6rem);
justify-content: space-between;
align-content: start;
gap: 0.5rem;
min-height: 12rem;
}
Une habitude calme de conteneur grid
Colonnes et lignes de modèle d’abord, puis gap, puis alignement des items dans les cellules, puis packing content s’il reste de l’espace. Jetez un œil à grid-auto-flow quand l’ordre de placement auto compte. Gardez span, numéros de ligne et zones nommées pour les leçons Grid suivantes.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
gap: 1.25rem;
justify-items: stretch;
align-items: stretch;
}
À vous de jouer
- Créez un tableau avec trois colonnes
1fret des lignesauto 1fr auto. - Ajoutez
gap: 1rem. - Centrez le contenu des cellules avec
justify-itemsetalign-items. - Packez un tableau à pistes fixes avec
justify-content: space-between. - Notez une propriété à garder pour Grid Items ou Grid Areas.
Erreurs fréquentes
- Confondre
justify-items(dans les cellules) etjustify-content(toute la grille) - Mettre trop tôt le
spand’item ou des noms de zones sur le conteneur - Ne définir que des colonnes et s’étonner de hauteurs de lignes aléatoires
- Apporter les habitudes
growde Flex sur le conteneur grid - Traiter cette leçon comme tout le module Areas
Résumé
- Les props du conteneur grid définissent pistes, gouttières et alignement
grid-template-columns/rowsesquissent la grillejustify-items/align-itemsalignent le contenu dans les cellulesjustify-content/align-contentpackent la grille dans l’espace libre- Span d’items et zones nommées viennent dans les leçons Grid suivantes
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut