Apprends CSS Grid pour construire des mises en page bidimensionnelles avec des lignes et des colonnes. Maîtrise grid-template-columns, l'unité fr, repeat(), gap, et le placement d'éléments pour créer des mises en page complexes.
CSS Grid est un système de mise en page bidimensionnel — contrairement à Flexbox qui gère un axe à la fois, Grid te permet de contrôler simultanément les lignes et les colonnes.
Pour créer une grille, définis display: grid sur un conteneur. Ensuite, définis tes pistes de colonnes et de lignes avec grid-template-columns et grid-template-rows.
.grid {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px 100px;
gap: 16px;
}Cela crée une grille avec 3 colonnes (chacune de 200px de large) et 2 lignes (chacune de 100px de haut), avec 16px d'espacement entre toutes les cellules.
La propriété gap fonctionne exactement comme dans Flexbox — elle ajoute de l'espacement entre les pistes de la grille sans affecter les bords extérieurs. Tu peux aussi utiliser column-gap et row-gap séparément.
/* L'unité fr distribue l'espace disponible proportionnellement */
.grid-fractional {
display: grid;
/* 1ère colonne obtient 1 part, 2ème obtient 2 parts */
grid-template-columns: 1fr 2fr;
gap: 16px;
}
/* repeat() évite d'écrire la même valeur plusieurs fois */
.grid-repeat {
display: grid;
/* Crée 3 colonnes égales */
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* Mélange pistes fixes et flexibles */
.grid-mixed {
display: grid;
/* Sidebar fixe, contenu principal flexible, aside fixe */
grid-template-columns: 250px 1fr 200px;
gap: 16px;
}
/* Auto-fill crée autant de colonnes que possible */
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}Par défaut, les éléments de la grille remplissent les cellules dans l'ordre de gauche à droite, de haut en bas. Mais tu peux placer des éléments dans des cellules spécifiques en utilisant grid-column et grid-row.
Les lignes de la grille sont numérotées à partir de 1 (pas 0). Une grille à 3 colonnes a 4 lignes de colonnes : 1, 2, 3, 4.
.header {
grid-column: 1 / 4; /* s'étend de la ligne 1 à la ligne 4 (toutes les 3 colonnes) */
}
.sidebar {
grid-row: 2 / 4; /* s'étend sur les lignes 2 et 3 */
}
/* Notation abrégée avec le mot-clé span */
.wide-item {
grid-column: span 2; /* s'étend sur 2 colonnes depuis la position actuelle */
}La propriété grid-column est un raccourci pour grid-column-start / grid-column-end. Le mot-clé span est un moyen pratique de dire "occupe N pistes" sans calculer les numéros de ligne exacts.
Pour des mises en page complexes, tu peux aussi utiliser des zones de grille nommées avec grid-template-areas, mais le placement basé sur les lignes est la base que tu dois maîtriser en premier.
Que crée `grid-template-columns: repeat(3, 1fr)` ?