Grid - Joker: The Killing Joke¶
Dans le cadre de cet exercice, vous devrez recréer l’une des planches du célèbre roman graphique Batman: The killing joke à l’aide d’une grille CSS.
Aperçu du résultat 👇¶
Matériel¶
Couleurs 🎨¶
- Noir #000000
- Blanc #ffffff
Requis (consignes)¶
- La page doit avoir un fond noir et le roman graphique (novel) avoir un fond blanc.
- Le roman graphique doit mesurer 80% de la largeur disponible, avoir espace blanc de 10px entre chaque case ainsi que tout le tour de lui-même.
- Chaque image doit prendre toute la largeur disponible dans la case attribuée.
Notes de cours¶
- CSS Grid intro
- Styles du conteneur:
grid-template-columnsetgrid-template-rows - Espacement avec
gap - Unités
fr,minmax()etrepeat() - Styles des éléments enfants à placer:
grid-columnetgrid-row - Définir les 4 coins de l'élément enfant à placer avec
grid-area - Style du conteneur:
grid-template-areas: : nommer des zones dans une grille