Projet : une page responsive avec CSS Grid - le temple d'Abou Simbel

Le moment est venu de combiner tout ce que tu as appris sur CSS Grid et de créer un projet complet ! Nous allons construire un site web responsive inspiré du complexe du temple d'Abou Simbel, en utilisant toutes les techniques Grid que tu as explorées. Ce temple est d'ailleurs la meilleure leçon de responsivité qui soit : dans les années 1960, on l'a découpé en blocs et remonté plus haut pour le sauver des eaux d'un nouveau lac de barrage. Les pierres sont restées les mêmes, seul le plan a changé. Il en sera de même pour ta page, car le HTML restera inchangé, et nous reconstruirons la mise en page pour chaque écran.

Plan du projet

Avant de poser la première pierre, listons les sections. Notre projet comprendra :

1. Header - un en-tête couvrant toute la largeur
2. Navigation - des liens dans l'en-tête de la page
3. Section Hero - une grande bannière de bienvenue
4. Galerie - une grille responsive d'artefacts
5. Contenu principal - un article avec des informations
6. Barre latérale - un panneau latéral avec des informations supplémentaires
7. Footer - le pied de page

Structure HTML

On construit le squelette de la page avec les balises sémantiques que tu as découvertes au début du cours. Toutes les sections sont des enfants directs du conteneur .abu-simbel, car seuls les enfants directs deviennent des éléments de la grille :

1<div class="abu-simbel">
2  <header class="site-header">
3    <h1>Temple d'Abou Simbel</h1>
4    <nav class="top-nav">
5      <a href="#">Accueil</a>
6      <a href="#">Galerie</a>
7      <a href="#">Histoire</a>
8      <a href="#">Contact</a>
9    </nav>
10  </header>
11
12  <section class="hero">
13    <h2>Découvre les secrets de l'Égypte ancienne</h2>
14    <p>Un temple monumental taillé dans la roche</p>
15  </section>
16
17  <section class="gallery">
18    <div class="artifact featured">Statue de Ramsès II</div>
19    <div class="artifact">Hiéroglyphes</div>
20    <div class="artifact">Colonnes</div>
21    <div class="artifact">Fresques</div>
22    <div class="artifact">Scarabée</div>
23    <div class="artifact">Sphinx</div>
24  </section>
25
26  <main class="content">
27    <h2>Histoire du temple</h2>
28    <p>Abou Simbel est l'un des monuments les plus magnifiques d'Égypte...</p>
29  </main>
30
31  <aside class="sidebar">
32    <h3>Informations</h3>
33    <ul>
34      <li>Construit : vers 1264 av. J.-C.</li>
35      <li>Bâtisseur : Ramsès II</li>
36      <li>Emplacement : Nubie</li>
37    </ul>
38  </aside>
39
40  <footer class="site-footer">
41    <p>Académie égyptienne du code</p>
42  </footer>
43</div>

L'ordre dans le HTML correspond à l'ordre logique de lecture : l'en-tête, la bannière, la galerie, le contenu, le panneau latéral et le pied de page. C'est exactement dans cet ordre qu'un lecteur d'écran lira la page, quelle que soit la façon dont nous la disposerons en CSS.

CSS Grid - la mise en page principale

Maintenant, nous dessinons le plan du temple avec des mots. Dans grid-template-areas, chaque chaîne entre guillemets correspond à une rangée, et chaque mot à une cellule. Répéter un nom étend la zone sur plusieurs cellules :

1.abu-simbel {
2  display: grid;
3  grid-template-areas:
4    "header  header"
5    "hero    hero"
6    "gallery gallery"
7    "content sidebar"
8    "footer  footer";
9  grid-template-columns: 1fr 300px;
10  grid-template-rows: auto auto auto 1fr auto;
11  gap: 20px;
12  min-height: 100vh;
13  padding: 20px;
14}
15
16.site-header  { grid-area: header; }
17.hero         { grid-area: hero; }
18.gallery      { grid-area: gallery; }
19.content      { grid-area: content; }
20.sidebar      { grid-area: sidebar; }
21.site-footer  { grid-area: footer; }

Chaque section rejoint sa zone grâce à grid-area, nous ne comptons donc aucune ligne. Les zones doivent former des rectangles, sinon le navigateur ignore toute la déclaration, et tu marques une cellule vide avec un point. La quatrième rangée a une taille de 1fr, donc grâce à min-height: 100vh, le contenu et le panneau latéral remplissent la hauteur libre, et le pied de page reste en bas.

Galerie responsive avec auto-fit

La galerie est une grille dans la grille, comme des chambres à l'intérieur d'une grande salle. C'est un élément de la grille principale, et en même temps elle devient elle-même un conteneur avec ses propres colonnes :

1.gallery {
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
4  gap: 15px;
5}
6
7.artifact.featured {
8  grid-column: span 2;
9  grid-row: span 2;
10}

Les colonnes mesurent de 200px à 1fr, leur nombre s'adaptera donc à la largeur de l'écran, et la statue de Ramsès II occupera un carré de deux sur deux. La grille imbriquée a ses propres pistes, indépendantes de celles du parent. S'il reste des cellules vides après la statue, ajoute à .gallery la déclaration grid-auto-flow: dense, et les artefacts plus petits combleront les trous.

Aligner les éléments

Grid aligne les éléments sur les deux axes. Nous divisons l'en-tête en deux colonnes, le logo et la navigation, et nous centrons la bannière avec une seule propriété :

1.site-header {
2  display: grid;
3  grid-template-columns: auto 1fr;
4  align-items: center;
5  gap: 20px;
6}
7
8.top-nav {
9  justify-self: end;
10  display: flex;
11  gap: 15px;
12}
13
14.hero {
15  display: grid;
16  place-items: center;
17  min-height: 300px;
18}

align-items: center aligne verticalement le logo et les liens, et justify-self: end pousse la navigation contre le bord droit de sa cellule. Les liens eux-mêmes sont disposés par Flexbox, car ils forment une seule rangée d'éléments. Le raccourci place-items: center combine align-items et justify-items, le contenu de la bannière se trouve donc exactement au centre.

Media queries pour la responsivité

Sur les écrans plus étroits que 768px, deux colonnes, c'est trop. Il suffit de redessiner la carte des zones en une seule colonne et d'annuler l'étirement de la statue mise en valeur :

1@media (max-width: 768px) {
2  .abu-simbel {
3    grid-template-areas:
4      "header"
5      "hero"
6      "gallery"
7      "content"
8      "sidebar"
9      "footer";
10    grid-template-columns: 1fr;
11  }
12
13  .artifact.featured {
14    grid-column: span 1;
15    grid-row: span 1;
16  }
17
18  .site-header {
19    grid-template-columns: 1fr;
20    text-align: center;
21  }
22
23  .top-nav {
24    justify-self: center;
25  }
26}

Le HTML ne change pas d'un seul caractère, nous reconstruisons uniquement le plan, exactement comme lors du déplacement d'Abou Simbel. Le panneau latéral passe sous le contenu, la statue occupe une seule cellule, et l'en-tête se dispose en colonne. Ici, nous partons de la version grand écran et nous la réduisons avec max-width. Je préfère le chemin inverse, le mobile-first avec min-width, mais les deux approches sont correctes.

Résumé complet du module CSS Grid

Dans ce module, tu as appris toutes les techniques clés de CSS Grid :

• Les bases : display: grid, grid-template-columns/rows, gap, l'unité fr
• Le positionnement : grid-column, grid-row, span, grid-area
• Les zones nommées : grid-template-areas pour créer des plans de mise en page visuels
• L'alignement : justify-items/content, align-items/content, place-items
• La responsivité : auto-fill, auto-fit, minmax(), repeat(), media queries

CSS Grid est un outil puissant qui te permet de créer des mises en page aussi bien simples que très complexes. Combine-le avec Flexbox pour les composants internes, et tu pourras construire n'importe quel site web ! Dans ton portail, tu peux aussi utiliser, à la place des zones, les lignes nommées de la leçon précédente. Vérifie la mise en page sur des écrans allant de 320px jusqu'aux moniteurs très larges, et fais des captures d'écran pour chaque breakpoint.

Maintenant, c'est à toi - crée ton propre portail monumental dans l'éditeur ci-dessous !

Souviens-toi : grid-template-areas est un plan du temple dessiné avec des mots, alors tu reconstruis le plan, et les pierres du HTML restent les mêmes.

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>Projet : page responsive - Abou Simbel</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="abu-simbel">
11        <header class="site-header">
12            <h1>Temple d'Abou Simbel</h1>
13            <nav class="top-nav">
14                <a href="#">Accueil</a>
15                <a href="#">Galerie</a>
16                <a href="#">Histoire</a>
17                <a href="#">Contact</a>
18            </nav>
19        </header>
20
21        <section class="hero">
22            <h2>Découvre les secrets de l'Égypte antique</h2>
23            <p>Un temple monumental taillé dans la roche par Ramsès II</p>
24        </section>
25
26        <section class="gallery">
27            <div class="artifact featured">Statue de Ramsès II</div>
28            <div class="artifact">Hiéroglyphes</div>
29            <div class="artifact">Colonnes</div>
30            <div class="artifact">Fresques</div>
31            <div class="artifact">Scarabée</div>
32            <div class="artifact">Sphinx</div>
33        </section>
34
35        <main class="content">
36            <h2>Histoire du temple</h2>
37            <p>Abou Simbel est l'un des plus magnifiques monuments de l'Égypte antique. Le temple a été taillé dans une falaise rocheuse sur la rive ouest du Nil.</p>
38            <p>Quatre statues colossales de Ramsès II gardent l'entrée du temple, chacune haute de 20 mètres.</p>
39        </main>
40
41        <aside class="sidebar">
42            <h3>Informations</h3>
43            <ul>
44                <li>Construit : env. 1264 av. J.-C.</li>
45                <li>Bâtisseur : Ramsès II</li>
46                <li>Lieu : Nubie</li>
47                <li>Déplacé : en 1968</li>
48            </ul>
49        </aside>
50
51        <footer class="site-footer">
52            <p>Académie égyptienne de codage - Projet CSS Grid</p>
53        </footer>
54    </div>
55</body>
56</html>