Dessiner une page en zones — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 8)

Dessiner une page en zones

Grid · niveau 2

Énoncé

Le blog de la Librairie a la structure HTML suivante :


<div class="page">
  <header>Le blog de la Librairie</header>
  <main>…</main>
  <aside>Articles récents</aside>
  <nav aria-label="Catégories">Catégories</nav>
  <footer>Pied de page</footer>
</div>

Écrire la feuille de style qui produit, dans 760 pixels : l'en-tête sur toute la largeur ; dessous, à gauche, l'article, et à droite, dans une colonne de 220 pixels, les articles récents au-dessus des catégories ; l'article occupe la hauteur des deux ; le pied de page sur toute la largeur. Utiliser grid-template-areas.

Corrigé

L'article occupe deux rangées : on répète son nom sur deux lignes de la grille ; ce rectangle de deux cellules est une zone valide.


.page {
  display: grid;
  grid-template-areas:
    "entete  entete"
    "contenu recents"
    "contenu categories"
    "pied    pied";
  grid-template-columns: 1fr 220px;
  gap: 12px;
  width: 760px;
}

header {
  grid-area: entete;
}

main {
  grid-area: contenu;
}

aside {
  grid-area: recents;
}

nav {
  grid-area: categories;
}

footer {
  grid-area: pied;
}

La page complète est code/ch8/exercices/blog.html. L'ordre du code HTML (l'article avant les encadrés) est bien l'ordre de lecture ; la grille ne fait que disposer.