Comment fonctionnent grid-template-areas et les grilles responsives ?

Question

Accepted Answer

`grid-template-areas` vous permet de mettre en page une grille **visuellement** en nommant des régions, rendant les mises en page complexes lisibles et faciles à réarranger de manière responsive.

## Définir les zones nommées

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

L'`grid-template-areas` en art ASCII *est* la mise en page — vous pouvez voir la structure en un coup d'œil, et répéter un nom fait s'étendre une région sur plusieurs cellules.

## Réarranger pour mobile — il suffit de redessiner la carte

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

Pour changer entièrement la mise en page sur mobile, vous réécrivez simplement la carte des zones — le HTML et les affectations `grid-area` restent identiques. C'est beaucoup plus propre que de repositionner chaque élément individuellement.

## Pourquoi c'est puissant

- **Auto-documenté** — le CSS reflète visuellement la mise en page rendue.
- **Découplé de l'ordre source** — les éléments peuvent être placés n'importe où indépendamment de l'ordre HTML (utile pour mettre `main` en premier dans le DOM pour l'accessibilité, tout en affichant la barre latérale en premier visuellement).
- **Reflux responsive facile** — échangez le modèle de zone par point d'arrêt.

## Pourquoi c'est important

Les zones de grille nommées rendent les mises en page au niveau des pages (en-tête/barre latérale/contenu/pied de page) à la fois lisibles et triviales à adapter — la restructuration est une question de modification d'une carte ASCII, et non de recâblage des positions.

C'est l'une des techniques de mise en page les plus claires et les plus maintenables que CSS offre.