CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 8 · Exercice de TD
Des zones qui ne marchent pas
Grid · niveau 2
Énoncé
La page code/ch8/erreurs/zones-invalides.html devait afficher un en-tête, un contenu, un encadré et un pied de page. Tous les éléments s'empilent au même endroit, dans une étroite colonne à droite.
.page {
display: grid;
grid-template-areas:
"entete entete entete"
"contenu contenu encadre"
"contenu pied pied";
grid-template-columns: 1fr 1fr 200px;
gap: 10px;
width: 760px;
}(les éléments reçoivent grid-area: entete, contenu, encadre et pied). Expliquer l'erreur, puis pourquoi les éléments se retrouvent tous dans une même cellule. Proposer une correction.
Corrigé
La zone contenu occupe les cellules (2,1), (2,2) et (3,1) : c'est un L, pas un rectangle. Toute la déclaration grid-template-areas est donc invalide et ignorée : l'onglet Computed affiche none, et l'onglet Styles barre la déclaration avec un triangle d'avertissement. Le vérificateur stylelint le signale aussi (named-grid-areas-no-invalid).
Pourquoi l'empilement ? Les éléments demandent toujours grid-area: entete… mais la grille ne connaît plus aucune ligne de ce nom. Dans ce cas, le navigateur fait comme si une ligne de ce nom existait après la dernière ligne de la grille explicite : il crée des colonnes implicites, et tous les éléments se retrouvent dans la même cellule supplémentaire, à droite. Correction : donner à chaque zone une forme rectangulaire, par exemple
.page {
grid-template-areas:
"entete entete entete"
"contenu contenu encadre"
"pied pied pied";
}100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.