CSS Grid : ce qu'il faut vraiment savoir en 2026

Pourquoi Grid plutôt que Flexbox ?

Flexbox = une dimension (ligne ou colonne). Grid = deux dimensions simultanément.

Utilise Flexbox pour aligner des éléments dans une direction. Grid pour structurer une mise en page entière.

La syntaxe de base

css copier

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}

1fr = une fraction de l'espace disponible. repeat(3, 1fr) = trois colonnes égales.

Les colonnes adaptatives sans media query

css copier

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

Les colonnes se créent et disparaissent automatiquement selon la largeur disponible. Zéro media query. C'est le pattern le plus puissant de Grid.

Placer un élément précisément

css copier

.hero {
grid-column: 1 / -1; /* toute la largeur */
grid-row: 1 / 3; /* deux lignes de haut */
}

-1 = dernière ligne/colonne. Pratique pour les éléments qui s'étendent sur tout le conteneur.

Nommer les zones

css copier

.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}

header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: content; }
footer { grid-area: footer; }

Lisible, maintenable, et facile à réorganiser avec les media queries :

css copier

@media (max-width: 640px) {
.layout {
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}

Centrer absolument n'importe quoi

css copier

.container {
display: grid;
place-items: center; /* = align-items + justify-items */
min-height: 100vh;
}

Tableau des propriétés essentielles

Propriété | Rôle
grid-template-columns | Définit les colonnes
grid-template-rows | Définit les lignes
gap | Espacement entre cellules
grid-column | Position/étendue en colonne
grid-row | Position/étendue en ligne
grid-area | Nom ou position raccourcie
place-items | Alignement sur les deux axes
auto-fit / auto-fill | Colonnes dynamiques

Subgrid — le futur (déjà là)

css copier

.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.card {
display: grid;
grid-template-rows: subgrid; /* hérite de la grille parente */
grid-row: span 3;
}

Les titres, corps et pieds des cartes s'alignent entre elles automatiquement. Supporté dans tous les navigateurs modernes depuis 2023.

Le meilleur outil pour apprendre Grid visuellement : Firefox DevTools. Son inspecteur Grid est le meilleur du marché.