Grid CSS
Flexbox a aligné les éléments dans une direction. CSS Grid ouvre le chapitre suivant : lignes et colonnes ensemble. Activez display: grid, esquissez des pistes (tracks), ajoutez gap, puis allez plus loin dans les leçons Grid Container, Items, Areas et Responsive.
Une boîte à outils de démarrage Grid
📊 Grid en un coup d’œil
| Idée | Rôle au quotidien |
|---|---|
| Conteneur Grid | Parent avec display: grid (ou inline-grid) |
| Items Grid | Enfants directs qui s’installent dans la grille |
| Tracks | Lignes et colonnes qui forment le treillis |
| Cellules / zones | Espaces où atterrissent les items (zones dans une leçon suivante) |
gap |
Gouttières entre tracks sans bidouilles de marge |
Unité fr |
Partager l’espace restant entre tracks (aperçu) |
Pensez à Grid comme à du papier quadrillé pour la page : vous tracez d’abord colonnes et lignes, puis vous déposez le contenu dans les cellules. Flexbox reste excellent pour les barres d’outils et les groupes mono-axe.
display: grid — allumer le treillis
Mettez display: grid sur le parent. Les enfants deviennent automatiquement des items de grille — aucune classe supplémentaire pour le modèle de base.
.board {
display: grid;
}
Les colonnes d’abord — un modèle simple
grid-template-columns définit les tracks verticales. Trois colonnes égales forment une esquisse calme pour cartes ou tuiles.
.board {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
gap — des gouttières honnêtes
Utilisez gap (ou row-gap / column-gap) pour garder un espacement cohérent quand les tracks se réorganisent. Préférez gap à saupoudrer des marges sur chaque enfant.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
Une petite matrice de cartes
Même idée qu’une esquisse de galerie — tracks égales plus gap — mais vous parlez maintenant Grid, pas seulement flex-wrap.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.cards__item {
min-height: 8rem;
}
fr — partager l’espace libre
L’unité fr répartit l’espace libre entre tracks. 2fr 1fr rend la première colonne deux fois plus large que la seconde quand il reste de la place.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
Une habitude Grid calme
Utilisez Grid pour les coques de page bidimensionnelles et les matrices. Utilisez Flexbox pour les rangées unidimensionnelles. Commencez par display: grid, un grid-template-columns simple et gap. Laissez le placement automatique profond, les zones nommées et les tracks Grid responsives pour les leçons suivantes.
.page {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
.page__main,
.page__rail {
min-width: 0;
}
Essayez vous-même
- Créez un conteneur avec
display: grid. - Définissez
grid-template-columns: repeat(3, 1fr). - Ajoutez
gap: 1rementre les tracks. - Essayez
2fr 1frpour une coque main + rail. - Écrivez une phrase : quand choisiriez-vous encore Flexbox ?
Erreurs fréquentes
- Mettre
display: gridsur chaque élément sans besoin de mise en page - S’attendre à ce que le wrap Flexbox seul remplace une vraie Grid 2D
- Sauter
gapet se battre avec les marges des enfants pour toujours - Sauter aux zones nommées avant que les tracks de base soient naturelles
- Construire des coques de page entières avec float quand Grid convient mieux
Résumé
- CSS Grid est bidimensionnel : lignes et colonnes ensemble
display: gridtransforme les enfants en items de grillegrid-template-columns(puis les lignes) définit les tracksgapetfrgardent gouttières et espace libre calmes- Des leçons plus profondes conteneur, item, zone et Grid responsive suivent
🧠 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