HTML CSS JS

CSS Grid est le système de mise en page le plus puissant du CSS. Là où Flexbox gère une seule direction (ligne ou colonne), Grid gère les deux simultanément — lignes ET colonnes.

Le concept

Grid divise un conteneur en une grille invisible de lignes (rows) et colonnes (columns). Vous placez ensuite les éléments dans cette grille.

Pour activer Grid : display: grid sur le conteneur parent.

grid-template-columns — définir les colonnes

Cette propriété définit le nombre et la taille des colonnes :

• grid-template-columns: 200px 200px 200px — 3 colonnes de 200px chacune
• grid-template-columns: 1fr 1fr 1fr — 3 colonnes de taille égale
• grid-template-columns: 2fr 1fr — 2 colonnes, la première 2x plus large
• grid-template-columns: 300px 1fr — la première 300px fixe, la seconde prend le reste

L'unité fr (fraction)

fr signifie "fraction de l'espace disponible". C'est l'unité native de Grid :

• 1fr 1fr 1fr = 3 colonnes égales (chacune prend 1/3)
• 2fr 1fr = la première prend 2/3, la seconde 1/3

La fonction repeat()

Au lieu d'écrire 1fr 1fr 1fr 1fr, écrivez repeat(4, 1fr).

La formule magique — responsive automatique sans media query

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

Cette ligne crée une grille qui s'adapte automatiquement :

• auto-fit — crée autant de colonnes que possible
• minmax(280px, 1fr) — chaque colonne fait minimum 280px, maximum 1fr

Résultat : sur un écran large vous avez 4 colonnes, sur tablette 2, sur mobile 1 — avec UNE seule ligne CSS et AUCUNE media query.

C'est probablement la ligne CSS la plus utile de tout ce cours.

gap — l'espace entre les cellules

gap: 1.5rem crée 1.5rem d'espace entre chaque cellule, horizontalement et verticalement. Vous pouvez aussi séparer : gap: 2rem 1rem (2rem vertical, 1rem horizontal).

Placer des éléments manuellement

Par défaut, les éléments se placent automatiquement (gauche → droite, haut → bas). Vous pouvez aussi placer un élément sur des cellules spécifiques :

• grid-column: span 2 — l'élément occupe 2 colonnes
• grid-row: span 2 — l'élément occupe 2 lignes
• grid-column: 1 / 3 — de la colonne 1 à la colonne 3

grid-template-areas — nommer les zones

Vous pouvez nommer les zones de votre grille pour un layout lisible :

grid-template-areas: "header header" "sidebar main" "footer footer";

Puis assignez chaque élément à sa zone avec grid-area: header.

Grid vs Flexbox — quand utiliser lequel ?

• Flexbox — composants (navigation, carte, formulaire), alignement dans UNE direction
• Grid — layouts de page, galeries d'images, tout ce qui a lignes ET colonnes

En pratique : Grid pour la grille de projets, Flexbox pour l'intérieur d'une carte.