Grid responsive CSS
Grid Areas vous a appris à nommer la carte de page. Grid responsive demande ce qui se passe quand le viewport se rétrécit : les colonnes s’effondrent-elles ? La barre latérale passe-t-elle sous l’en-tête ? Les cartes se réorganisent-elles sans second HTML ? Quelques motifs de breakpoint calmes — le module Responsive Design suit.
Boîte à outils grid responsive
📊 Grid responsive en bref
| Outil | Rôle courant |
|---|---|
grid-template-columns |
Changer les pistes dans une media query (ex. deux colonnes → une) |
grid-template-areas |
Redessiner la carte nommée quand empiler vaut mieux que côte à côte |
repeat(auto-fit, minmax(...)) |
Colonnes de cartes fluides sans breakpoint par nombre |
| Media query | Applique les changements grid seulement si le viewport correspond |
gap |
Garde le rythme quand pistes ou cartes changent |
| Pas de HTML extra par largeur | Même DOM ; le CSS déplace la mise en page |
Partez de la grille déjà fiable en grand écran. À un breakpoint clair, changez colonnes, lignes ou carte de zones — pas tout d’un coup. Les noms de la leçon précédente rendent les réécritures lisibles.
Colonnes à un breakpoint
Quand un shell deux colonnes doit devenir une colonne sur mobile, changez grid-template-columns dans une media query.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}
@media (max-width: 40rem) {
.shell {
grid-template-columns: 1fr;
}
}
Redessiner la carte de zones sur écran étroit
Les cartes header / aside / main côte à côte demandent souvent un nouveau bloc grid-template-areas quand la barre doit passer sous l’en-tête. Réécrivez les lignes entre guillemets ; régions rectangulaires.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
@media (max-width: 48rem) {
.shell {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"aside"
"main"
"footer";
}
}
auto-fit et minmax pour grilles de cartes
Pour galeries et tableaux de bord, repeat(auto-fit, minmax(...)) laisse les colonnes apparaître et passer à la ligne selon l’espace — souvent avec moins de breakpoints manuels.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
Viewport étroit ≠ autre langage de layout — mêmes outils grid, autres pistes ou cartes. Préférez le CSS au markup « mobile » dupliqué.
Habitude calme grid responsive
Un breakpoint principal d’abord. Associez changement de colonnes et réécriture de carte si les labels aident. auto-fit où le nombre de cartes doit varier. Ordre DOM sensé pour le clavier. Théorie responsive complète dans le module suivant.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas: "nav content";
gap: 1.25rem;
}
@media (max-width: 42rem) {
.page {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"content";
}
}
.stats {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr));
gap: 0.75rem;
}
@media (max-width: 36rem) {
.stats {
grid-template-columns: 1fr;
}
}
Essayez vous-même
- Passez un shell deux colonnes à une colonne sous
max-width: 40rem. - Réécrivez la carte header / aside / main / footer pour empiler en étroit.
- Ligne de cartes avec
repeat(auto-fit, minmax(14rem, 1fr)). - Un breakpoint calme — ne resetez pas toute la grille d’un coup.
- Un arbre HTML ; ensuite Responsive Design dans le cours.
Erreurs fréquentes
- Rétrécir les pistes sans fin au lieu de changer colonnes ou empiler
- HTML « mobile » séparé au lieu d’actualiser le grid en CSS
- Nombre de cellules incohérent en réécrivant
grid-template-areas - Une media query géante qui reset tout
- Traiter cette leçon comme tout le cours Responsive
Résumé
- Grid responsive adapte colonnes, cartes et grilles auto-fit à la largeur
- Media queries limitent changements de pistes et cartes
- Zones nommées s’accordent bien aux réécritures sur petit écran
- Breakpoints calmes et un seul DOM
- Module Grid (490–530) terminé ; module Responsive Design suit
🧠 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