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

.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

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

.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

.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 :

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

Centrer absolument n'importe quoi

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

Tableau des propriétés essentielles

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

.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é.