Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Testez vos compétences : Grilles
Le but de cette tâche est de vous faire travailler avec «CSS Grid Layout » (modèle de disposition en grille) et d'évaluer votre compréhension du comportement d'une grille et des éléments de grille. Vous allez compléter trois petites tâches en utilisant différents éléments des grilles CSS.
Note :Vous pouvez tester des solutions dans les éditeurs interactifs ci-dessous ou, si vous le préférez, sur un site commeCodePen,jsFiddle ouGlitch.
N'hésitez pas à nous contacter si vous avez besoin d'aide — voir la sectionÉvaluation ou aide supplémentaire au bas de cette page.
Disposition en grille 1
Dans cette tâche, vous devriez créer une grille dans laquelle les quatre enfants s'arrangeront automatiquement. La grille devrait répartir l'espace disponible en trois colonnes égales et avoir des « gouttières » de 20 pixels entre les colonnes et les lignes.
Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :
Si vous voulez utiliser un autre éditeur de code, récupérez le code dufichier de démarrage pour cette tâche (disposition en grille 1).
Disposition en grille 2
Nous avons déjà défini une grille dans cet exemple. Modifiez les règles CSS des deux enfants (.item1 et.item2), chacun desquels devrait couvrir plusieurs pistes de grille — le deuxième élément devrait superposer le premier comme dans l'image ci-dessous.
Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :
Questions supplémentaires :
- Pouvez-vous maintenant afficher le premier élément (
.item1) en avant sans modifier l'ordre des éléments dans le code ?
Si vous voulez utiliser un autre éditeur de code, récupérez le code dufichier de démarrage pour cette tâche (disposition en grille 2).
Disposition en grille 3
Cette grille a quatre enfants directs — le code de démarrage affiche ces éléments en utilisant le placement automatique. Utilisezgrid-area etgrid-template-areas afin de les disposer comme le montre l'image ci-dessous.
Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :
Si vous voulez utiliser un autre éditeur de code, récupérez le code dufichier de démarrage pour cette tâche (disposition en grille 3).
Mise en page avec Flexbox et grilles 4
Vous devrez utiliser Flexbox et les grilles CSS pour recréer l'exemple illustré dans l'image ci-dessous. Vous n'êtes pas obligé de modifier le code HTML pour y parvenir.
Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :
Si vous voulez utiliser un autre éditeur de code, récupérez le code dufichier de démarrage pour cette tâche (mise en page avec Flexbox et Grilles 4).
Évaluation ou aide supplémentaire
Si vous souhaitez que votre travail soit évalué, ou si vous voulez demander de l'aide :
- Mettez votre travail dans un éditeur partageable en ligne tel queCodePen,jsFiddle ouGlitch. Vous pouvez écrire votre propre code ou utiliser celui des fichiers de démarrage fournis ci-dessus.
- Rédigez un sujet pour demander une évaluation et/ou une aide dans leforum Discourse du MDN dans la catégorie « Learning ». Incluez dans votre message :
- Un titre descriptif tel que « Évaluation demandée pour la mise en page flexible 1 ».
- Des détails sur ce que vous souhaitez que nous fassions — par exemple, si vous êtes bloqué et avez besoin d'aide, écrivez ce que vous avez déjà essayé.
- Un lien vers l'exemple que vous souhaitez faire évaluer ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne (comme expliqué à l'étape 1). C'est une bonne pratique à adopter — il est très difficile d'aider une personne ayant un problème de codage si on ne peut pas voir son code.
- Un lien vers la page de la tâche ou de l'évaluation proprement dite, afin que nous puissions trouver la question pour laquelle vous souhaitez de l'aide.