CSS Grid Layout a changé la façon dont nous créons des mises en page web. Ce système de grille bidimensionnel, intégré nativement dans tous les navigateurs modernes, permet de réaliser des layouts complexes avec un code CSS minimal et maintenable.
Pourquoi CSS Grid plutôt que Flexbox ?
Flexbox est monodimensionnel : il gère soit les lignes soit les colonnes. CSS Grid est bidimensionnel : il gère simultanément lignes et colonnes. Ce ne sont pas des concurrents mais des outils complémentaires.
Utilisez Flexbox pour les composants (navigation, boutons, cartes) et css grid pour les layouts de page (header, sidebar, main, footer). Les deux peuvent se combiner : un grid container peut contenir des flex containers.
Concepts de base : container et items
Un grid container est activé avec display: grid. Ses enfants directs deviennent des grid items. La propriété grid-template-columns définit les colonnes :
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 24px;
}
L'unité fr (fractional unit) distribue l'espace disponible proportionnellement. 1fr 2fr 1fr crée trois colonnes où la centrale est deux fois plus large que les autres.
Placement automatique vs explicite
Par défaut, css grid place les éléments automatiquement case par case. Mais vous pouvez placer explicitement chaque item avec grid-column et grid-row :
.header {
grid-column: 1 / -1; /* Toute la largeur */
}
.sidebar {
grid-column: 1 / 2;
grid-row: 2 / 4;
}
.main {
grid-column: 2 / -1;
}
La notation -1 fait référence à la dernière ligne/colonne. Cette approche permet des layouts complexes sans avoir à calculer des largeurs en pourcentages.
grid-template-areas : lisibilité maximale
Pour des layouts complexes, grid-template-areas offre une représentation visuelle de la grille dans le CSS :
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 240px 1fr 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
repeat(), auto-fill et auto-fit
La fonction repeat() évite les répétitions. Combinée à auto-fill ou auto-fit, elle crée des grilles responsives sans media queries :
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
Avec auto-fit, les colonnes s'adaptent automatiquement au nombre d'items et à la largeur disponible. C'est probablement la technique css grid la plus utilisée en production.
Alignement dans la grille
Les propriétés d'alignement fonctionnent sur deux axes : justify- pour l'axe horizontal (inline), align- pour l'axe vertical (block). Sur le container : justify-items, align-items, justify-content, align-content. Sur les items : justify-self, align-self.
.container {
justify-items: center; /* Centre les items horizontalement */
align-items: start; /* Aligne en haut verticalement */
}
Subgrid : la révolution des grilles imbriquées
Subgrid, maintenant supporté par tous les navigateurs modernes, permet aux enfants d'un grid item de s'aligner sur la grille parente. C'est la solution au problème classique d'alignement des cartes avec des hauteurs de contenu variables.
Pour aller plus loin, CSS-Tricks Grid Guide reste la référence ultime avec tous les exemples interactifs.
Conclusion
CSS Grid transforme des layouts autrefois complexes en quelques lignes de CSS claires et maintenables. Maîtriser les unités fr, repeat(auto-fit, minmax()), grid-template-areas et le placement explicite vous permettra de créer n'importe quel layout sans hacks ni frameworks CSS lourds.
CSS Grid Layout a définitivement transformé la création de mises en page web. Explorez subgrid pour aligner les enfants de grilles imbriquées et les named template areas pour des layouts déclaratifs ultra-lisibles. Combinez Grid et Flexbox intelligemment : Grid pour les layouts bidimensionnels (page entière, grilles de cards), Flexbox pour les composants unidimensionnels. Les Container Queries CSS permettent d'adapter les composants à leur conteneur plutôt qu'à la fenêtre, révolutionnant la réutilisabilité. Pratiquez avec le jeu CSS Grid Garden pour maîtriser les propriétés de placement, et consultez la référence MDN CSS Grid pour tous les cas avancés et les nouvelles fonctionnalités du standard.
