CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 8 · Application directe du cours
Calculer des pistes en fr
Grid · niveau 1 (application)
Énoncé
Calculer, au centième de pixel, la largeur de chaque colonne :
- d'un conteneur de 700 pixels avec
grid-template-columns: 120px 1fr 3fretgap: 16px; - d'un conteneur de 1000 pixels avec
grid-template-columns: repeat(4, 1fr)etgap: 24px.
Vérifier ensuite les résultats dans l'onglet Computed des outils de développement.
Corrigé
- Trois colonnes, donc deux gouttières. Espace libre : pixels, partagé en parts de 137 pixels. Les colonnes mesurent 120, 137 et pixels.
- Quatre colonnes, trois gouttières : pixels, en quatre parts égales de 232 pixels.
La page code/ch8/exercices/calcul-fr.html permet de le vérifier : Chromium affiche 120px 137px 411px et 232px 232px 232px 232px. L'erreur classique est d'oublier les gouttières : on trouverait 145 et 435 pixels dans le premier cas, et 250 pixels dans le second.
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.