Comment créer une mise en page avec CSS Grid ?

Question

Accepted Answer

**CSS Grid** est un système de mise en page bidimensionnel — il contrôle **les lignes et les colonnes simultanément**, contrairement à Flexbox qui ne gère qu'une seule ligne. Vous définissez une grille sur le conteneur et y placez les éléments.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## L'unité fr et repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` (« fraction ») distribue l'espace disponible — `1fr 2fr` le divise en 1:2. `repeat(3, 1fr)` est un raccourci pour trois pistes égales.

## Grille réactive SANS media queries

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

Cette simple ligne crée une grille de cartes entièrement réactive : chaque colonne fait au minimum `250px` ; le navigateur en ajuste **autant que possible** par ligne et enveloppe le reste — passant automatiquement de 4 colonnes sur ordinateur à 1 sur mobile. `auto-fit` + `minmax` est l'un des patterns les plus appréciés de Grid.

## Placer les éléments sur plusieurs cellules

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

Les éléments peuvent s'étendre sur plusieurs lignes/colonnes, permettant des mises en page de type magazine qui sont maladroites avec Flexbox.

## Grid vs Flexbox

- **Grid** — Mise en page 2D (lignes *et* colonnes) : mises en page de page, grilles de cartes, tableaux de bord.
- **Flexbox** — Mise en page 1D (une seule ligne ou colonne) : barres de navigation, groupes de boutons, centrage.

Ils se composent bien — une cellule de grille peut elle-même être un conteneur flex.

## Pourquoi c'est important

Grid est l'outil de mise en page CSS le plus puissant — il gère les mises en page de page complète et les grilles de cartes réactives facilement, remplaçant souvent les astuces de divs imbriquées.

Le pattern réactif `auto-fit`/`minmax` seul supprime le besoin de nombreuses media queries.