La vitrine — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 8)

La vitrine

Grid · niveau 2

Énoncé

La vitrine de l'accueil est une liste de huit éléments dans une grille de quatre colonnes égales, aux rangées de 100 pixels. Le premier, le « livre du mois », doit occuper deux colonnes et deux rangées ; le quatrième trois colonnes.

Écrire la feuille de style.
Dessiner le résultat. Le placement automatique laisse des trous : lesquels, et pourquoi ?
Ajouter grid-auto-flow: dense au conteneur et redessiner. Quel inconvénient cette propriété présente-t-elle pour un visiteur qui navigue au clavier ?

Corrigé


.vitrine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.vitrine > .vedette {
  grid-row: span 2;
  grid-column: span 2;
}

.vitrine > .large {
  grid-column: span 3;
}

Sans dense : la vedette occupe les colonnes 1 et 2 des rangées 1 et 2 ; les éléments 2 et 3 complètent la rangée 1. L'élément 4 cherche trois colonnes libres consécutives : en rangée 2, seules les colonnes 3 et 4 le sont ; il descend en rangée 3 (colonnes 1 à 3). Le placement automatique ne revient jamais en arrière : les éléments 5 à 8 suivent l'élément 4, et les deux cellules de la rangée 2 restent vides.

Avec grid-auto-flow: dense, chaque élément est placé dans le premier trou qui lui convient : 5 et 6 remplissent la rangée 2 (colonnes 3 et 4), 7 termine la rangée 3, 8 commence la rangée 4. Chromium place bien l'élément 5 en rangée 2 et l'élément 7 en colonne 4 de la rangée 3. L'inconvénient : l'ordre visuel ne suit plus l'ordre du code (5 apparaît au-dessus de 4). Un visiteur qui parcourt la vitrine avec la touche Tab voit le focus sauter d'une rangée à l'autre. À réserver aux galeries dont l'ordre n'a pas de sens. Fichier : code/ch8/exercices/galerie.html.