CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 8 · Exercice de TD
Lire un placement
Grid · niveau 1 (application)
Énoncé
Une grille de trois colonnes de 100 pixels et trois rangées de 60 pixels (gap: 10px) contient, dans cet ordre, cinq éléments X, Y, Z, W et V. Seuls les trois premiers sont placés :
.x {
grid-row: 1;
grid-column: 2 / 4;
}
.y {
grid-row: 1 / span 3;
grid-column: 1;
}
.z {
grid-row: 2 / -1;
grid-column: -2;
}Dessiner la grille obtenue, en indiquant pour chaque élément les cellules qu'il occupe, sa largeur et sa hauteur en pixels.
Corrigé
Les éléments placés d'abord :
X: rangée 1, de la ligne 2 à la ligne 4, donc colonnes 2 et 3 : pixels sur 60.Y: colonne 1, rangées 1 à 3 : 100 pixels sur .Z:grid-column: -2est la ligne 3 (l'avant-dernière des quatre lignes), donc la colonne 3 ;grid-row: 2 / -1va de la ligne 2 à la dernière : rangées 2 et 3. 100 pixels sur 130.
Restent libres les cellules (rangée 2, colonne 2) et (rangée 3, colonne 2) : W et V y sont placés automatiquement, dans cet ordre, en 100 × 60 pixels. La grille est entièrement remplie. On le vérifie avec code/ch8/exercices/placement.html et le calque de grille des outils de développement.
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.