Apprends Grid Template Areas

Zones de grille nommées

La propriété grid-template-areas de CSS Grid te permet de définir ta mise en page en utilisant des régions nommées au lieu de numéros de ligne. Chaque chaîne de caractères représente une ligne, et chaque nom dans cette chaîne représente une cellule de colonne. Cela crée une carte visuelle de ta mise en page directement dans le CSS.

css

.layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main   main"
    "footer  footer  footer";
  grid-template-rows: 60px 1fr 40px;
  grid-template-columns: 200px 1fr 1fr;
}

Règles pour grid-template-areas :

Chaque ligne est une seule chaîne de caractères, et toutes les lignes doivent avoir le même nombre de colonnes.
Les noms de zones doivent former des régions rectangulaires. Les formes en L ou autres formes non rectangulaires sont invalides.
Utilise un point (.) pour représenter une cellule vide.
Répète un nom sur des cellules adjacentes pour que cette zone s'étende sur plusieurs colonnes ou lignes.

Cette approche est sans doute la façon la plus lisible de définir des mises en page en CSS.

Assigner des éléments aux zones

html

<style>
  .page {
    display: grid;
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
    grid-template-rows: 60px 1fr 40px;
    grid-template-columns: 200px 1fr;
    min-height: 300px;
    gap: 8px;
  }

  .header  { grid-area: header;  background: #6366f1; }
  .sidebar { grid-area: sidebar; background: #8b5cf6; }
  .main    { grid-area: main;    background: #1e293b; }
  .footer  { grid-area: footer;  background: #6366f1; }
</style>

<div class="page">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

Mises en page responsive avec les zones de grille

L'un des aspects les plus puissants des zones de grille nommées est la facilité avec laquelle elles permettent le design responsive. Tu peux complètement réorganiser la mise en page en redéfinissant simplement grid-template-areas dans une media query sans changer le HTML.

css

/* Mobile : colonne unique */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  grid-template-columns: 1fr;
}

/* Desktop : deux colonnes */
@media (min-width: 768px) {
  .page {
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
    grid-template-columns: 250px 1fr;
  }
}

Remarque comment la sidebar passe de sous le contenu principal sur mobile à côté de celui-ci sur desktop. L'ordre HTML reste le même, mais la mise en page visuelle change entièrement. Cette séparation entre l'ordre du contenu et l'ordre visuel est une force centrale de CSS Grid.

Tu peux aussi utiliser des points (.) pour les cellules vides :

css

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

Grid Template Areas

Zones de grille nommées

Assigner des éléments aux zones

Mises en page responsive avec les zones de grille

Prêt à pratiquer ?