Les zones de grille et les template areas

Imagine que tu tiens un rouleau de papyrus avec le plan d'un temple égyptien tout entier. Sur ce plan, chaque pièce porte son propre nom - « salle du trône », « trésor », « chambre du prêtre ». C'est exactement comme ça que fonctionne grid-template-areas dans CSS Grid ! Au lieu de travailler avec des numéros de lignes, tu peux donner aux zones des noms lisibles et créer un plan visuel de mise en page qui ressemble à une carte ASCII.

grid-template-areas - un plan visuel de mise en page

La propriété grid-template-areas te permet de définir la mise en page d'une page à l'aide de noms, en créant une sorte de carte :

1.temple-layout {
2  display: grid;
3  grid-template-areas:
4    "header  header  header"
5    "nav     main    aside"
6    "footer  footer  footer";
7  grid-template-columns: 200px 1fr 200px;
8  grid-template-rows: auto 1fr auto;
9  min-height: 100vh;
10  gap: 10px;
11}

Chaque chaîne de texte entre guillemets représente une ligne de la grille. Des noms répétés sur une ligne signifient que l'élément s'étend sur plusieurs colonnes. En regardant ce CSS, tu vois immédiatement la structure de toute la page - comme un architecte qui regarde le plan d'un bâtiment !

Assigner les éléments aux zones

Après avoir défini la carte des zones, tu assignes les éléments HTML aux noms correspondants à l'aide de grid-area :

1.header   { grid-area: header; }
2.nav      { grid-area: nav; }
3.main     { grid-area: main; }
4.aside    { grid-area: aside; }
5.footer   { grid-area: footer; }

Le HTML correspondant :

1<div class="temple-layout">
2  <header class="header">Temple Header</header>
3  <nav class="nav">Navigation</nav>
4  <main class="main">Main Content</main>
5  <aside class="aside">Side Panel</aside>
6  <footer class="footer">Footer</footer>
7</div>

L'ordre des éléments dans le HTML n'a pas d'importance - la grille les placera selon la carte grid-template-areas. C'est un énorme avantage !

Les zones vides - le point comme marqueur de place

Si tu veux laisser un espace vide dans la grille, utilise un point (.) :

1.asymmetric-layout {
2  display: grid;
3  grid-template-areas:
4    "header header header"
5    "nav    main   ."
6    "nav    main   aside"
7    "footer footer footer";
8  grid-template-columns: 150px 1fr 200px;
9  gap: 15px;
10}

Dans l'exemple ci-dessus, le coin supérieur droit de la deuxième ligne reste vide - comme une chambre inutilisée dans un temple. Tu peux utiliser plusieurs points (...) pour la lisibilité, par exemple "nav main ...".

Mise en page complexe - un portail égyptien

Regardons une mise en page plus complexe avec plusieurs sections :

1.portal {
2  display: grid;
3  grid-template-areas:
4    "header  header   header"
5    "nav     hero     hero"
6    "nav     content  sidebar"
7    "footer  footer   footer";
8  grid-template-columns: 220px 1fr 280px;
9  grid-template-rows: 80px 200px 1fr 60px;
10  min-height: 100vh;
11  gap: 12px;
12}
13
14.portal-header  { grid-area: header; }
15.portal-nav     { grid-area: nav; }
16.portal-hero    { grid-area: hero; }
17.portal-content { grid-area: content; }
18.portal-sidebar { grid-area: sidebar; }
19.portal-footer  { grid-area: footer; }

Remarque comment la navigation (nav) s'étend sur deux lignes, et la section hero occupe deux colonnes. Cette notation visuelle rend la structure immédiatement compréhensible.

Des zones responsives avec les media queries

Toute la puissance de grid-template-areas se révèle quand on la combine avec les media queries. Tu peux complètement changer la mise en page de la page en modifiant seulement la carte des zones :

1/* Desktop - trois colonnes */
2.page {
3  display: grid;
4  grid-template-areas:
5    "header  header  header"
6    "nav     main    aside"
7    "footer  footer  footer";
8  grid-template-columns: 200px 1fr 250px;
9}
10
11/* Tablette - deux colonnes */
12@media (max-width: 768px) {
13  .page {
14    grid-template-areas:
15      "header  header"
16      "nav     main"
17      "aside   aside"
18      "footer  footer";
19    grid-template-columns: 180px 1fr;
20  }
21}
22
23/* Mobile - colonne unique */
24@media (max-width: 480px) {
25  .page {
26    grid-template-areas:
27      "header"
28      "nav"
29      "main"
30      "aside"
31      "footer";
32    grid-template-columns: 1fr;
33  }
34}

À chaque point de rupture, tu changes seulement la carte, et les éléments HTML se réorganisent automatiquement. Tu n'as besoin de modifier aucun HTML ni aucune assignation grid-area ! C'est comme avoir trois plans de temple - un pour un grand bâtiment, un pour un moyen et un pour un petit - mais avec les mêmes pièces.

Les règles de grid-template-areas

Souviens-toi de quelques règles importantes :

1. Chaque zone doit être un rectangle - tu ne peux pas créer des zones en forme de L ou de T
2. Les noms peuvent se répéter uniquement de manière à former un bloc rectangulaire
3. Chaque ligne doit avoir le même nombre de noms (correspondant au nombre de colonnes)
4. La casse compte - « Header » n'est pas la même chose que « header »
5. Les noms ne peuvent pas contenir d'espaces - utilise des traits d'union, par exemple side-bar

Les zones nommées sont comme des plans d'architecture tracés sur du papyrus - clairs, lisibles et faciles à modifier. Tout bon architecte égyptien commençait par un plan !

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Alignement dans CSS Grid</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Galerie de statues égyptiennes</h1>
11
12    <h2>justify-items et align-items</h2>
13    <div class="gallery-items">
14        <div class="statue">Anubis</div>
15        <div class="statue">Horus</div>
16        <div class="statue">Isis</div>
17        <div class="statue">Osiris</div>
18        <div class="statue">Ra</div>
19        <div class="statue">Thot</div>
20    </div>
21
22    <h2>justify-content et align-content</h2>
23    <div class="gallery-content">
24        <div class="artifact">Masque</div>
25        <div class="artifact">Scarabée</div>
26        <div class="artifact">Amulette</div>
27    </div>
28
29    <!-- Tâche : utilise les propriétés d'alignement -->
30    <!-- gallery-items: justify-items: center, align-items: center -->
31    <!-- gallery-content: justify-content: space-evenly, align-content: center -->
32</body>
33</html>