Placer les zones de la page
Objectif : Affecter les horaires, les conseils et le contact à des zones de grille nommées.
Une page peut contenir les bons blocs tout en restant difficile à parcourir si leur disposition n’est pas claire. Vous allez organiser les horaires, les conseils pratiques et le contact dans une grille dont les zones sont nommées. La structure HTML reste lisible, tandis que le CSS décrit où chaque partie apparaît.
Décrire la disposition avec des zones nommées
Avec grid-template-areas, vous dessinez une représentation textuelle de la grille. Chaque chaîne correspond à une rangée ; les noms répétés sur une même rangée désignent des cellules réunies dans une seule zone. Dans l’exemple, l’en-tête occupe toute la première rangée. Les trois zones de contenu occupent ensuite chacune une colonne.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atelier de jardinage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-layout">
<header class="entete">
<a class="logo" href="#accueil">Les mains vertes</a>
<nav aria-label="Navigation principale">
<a href="#horaires">Horaires</a>
<a href="#conseils">Conseils</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main class="contenu-principal">
<h1 id="accueil">Atelier de jardinage</h1>
<p>Apprenez à cultiver et à entretenir vos plantes.</p>
</main>
<section class="horaires" id="horaires" aria-labelledby="titre-horaires">
<h2 id="titre-horaires">Horaires</h2>
<p>Samedi, de 9 h à 12 h</p>
<p>Inscription nécessaire</p>
</section>
<section class="conseils" id="conseils" aria-labelledby="titre-conseils">
<h2 id="titre-conseils">Conseils pratiques</h2>
<ul>
<li>Arrosez tôt le matin.</li>
<li>Choisissez des plantes adaptées à votre exposition.</li>
<li>Préparez vos outils avant de commencer.</li>
</ul>
</section>
<aside class="contact" id="contact" aria-labelledby="titre-contact">
<h2 id="titre-contact">Contact</h2>
<p>Écrivez-nous à <a href="mailto:[email protected]">[email protected]</a>.</p>
</aside>
</div>
</body>
</html>Le conteneur .page-layout devient la grille. Son modèle indique trois colonnes : la première accueille les horaires, la deuxième les conseils, et la troisième le contact. La deuxième rangée est volontairement occupée par l’en-tête sur toute la largeur ; la troisième accueille le contenu principal. Cette disposition place le contenu principal après les zones détaillées dans le code HTML : l’ordre visuel est défini par la grille.
:root {
--couleur-fond: #f4f1e8;
--couleur-surface: #ffffff;
--couleur-texte: #24352a;
--couleur-accent: #356b45;
--espace: 1.5rem;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--couleur-fond);
color: var(--couleur-texte);
font-family: Arial, sans-serif;
line-height: 1.5;
}
.page-layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"entete entete entete"
"horaires conseils contact"
"principal principal principal";
gap: var(--espace);
max-width: 70rem;
margin: 0 auto;
padding: var(--espace);
}
.entete {
grid-area: entete;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--espace);
padding: var(--espace);
background: var(--couleur-accent);
color: var(--couleur-surface);
}
.entete a {
color: inherit;
}
.entete nav {
display: flex;
gap: 1rem;
}
.logo {
font-weight: bold;
text-decoration: none;
}
.contenu-principal {
grid-area: principal;
padding: var(--espace);
}
.horaires,
.conseils,
.contact {
padding: var(--espace);
background: var(--couleur-surface);
}
.horaires {
grid-area: horaires;
}
.conseils {
grid-area: conseils;
}
.contact {
grid-area: contact;
}
h1,
h2 {
margin-top: 0;
}
a {
color: var(--couleur-accent);
}Aperçu appliqué au document HTML de cette leçon : la règle CSS est injectée dans la page pour voir son effet réel.
La page affiche l’en-tête sur toute la largeur, puis les horaires, les conseils et le contact côte à côte. Le contenu principal occupe une rangée complète en dessous.Relier les éléments aux zones
Une zone déclarée dans grid-template-areas ne contient rien tant qu’un élément ne lui est pas associé. Vous effectuez cette association avec grid-area : la valeur doit reprendre exactement le nom prévu dans le modèle. Ici, .horaires rejoint la zone horaires, tandis que l’en-tête utilise la zone qui s’étend sur les trois colonnes. La casse et l’orthographe doivent correspondre.
Placer un élément avec les lignes de la grille
Les zones nommées sont pratiques lorsque vous voulez décrire la page en blocs reconnaissables. Pour une position ponctuelle, vous pouvez aussi cibler les lignes de la grille. Les lignes se numérotent à partir du bord de la grille : la première colonne est comprise entre les lignes 1 et 2, et la rangée qui suit l’en-tête entre les lignes 2 et 3.
/* Exemple alternatif : remplacez la déclaration grid-area de .contact. */
.contact {
grid-column: 3 / 4;
grid-row: 2 / 3;
}Aperçu appliqué au document HTML de cette leçon : la règle CSS est injectée dans la page pour voir son effet réel.
Ce placement met le contact dans la troisième colonne et la deuxième rangée de la grille. Il correspond à sa position dans le modèle nommé, mais il est moins parlant quand vous relisez la feuille de styles : les nombres ne disent pas directement « contact ». Gardez les deux écritures comme des alternatives pour un même élément, et non comme des règles à cumuler. Pour la page de l’atelier, les noms de zones rendent l’organisation plus facile à comprendre et à modifier.
À retenir
- Décrivez les rangées de la grille avec des chaînes dans grid-template-areas.
- Répétez un nom pour étendre une zone sur des cellules adjacentes ; chaque zone doit former un rectangle.
- Associez chaque élément à sa zone avec grid-area et un nom identique.
- Utilisez grid-column et grid-row pour indiquer un placement précis par lignes lorsque les noms de zones ne sont pas adaptés.
Dans la prochaine leçon, vous ajusterez les rangées et l’alignement du contenu des cartes sans perdre la structure des zones.