10. Media Query - Grid & Flexbox¶
Prérequis¶
Télécharger le fichier ZIP: ex_media_query.zip.
Exercices 1 - Media Query + Grid¶
Pour cet exercice, vous devez copier le fichier main.css dans un nouveau fichier grid.css et ajouter dans le fichier les règles CSS en utilisant les Media Query et Grid layout pour obtenir les résultats ci-dessous selon les règles suivantes.
Exercices 2 - Media Query + Flexbox¶
Pour cet exercice, vous devez copier le fichier main.css dans un nouveau fichier flexbox.css et ajouter dans le fichier les règles CSS en utilisant les Media Query et Flexbox layout pour obtenir les résultats ci-dessous selon les règles suivantes.
Selon les règles suivantes:¶
Pour les écrans de plus de 1024px de large
Pour les écrans de plus de 600 px (et moins de 1024px)
Pour les écrans de moins de 600 px
Pour un layout tel que celui-ci quel est l'avantage de Grid vs Flexbox ?
Pour ce layout précis (4 blocs en haut, 1 bloc pleine largeur au milieu, 4 blocs en bas), les deux fonctionnent — mais CSS Grid est objectivement plus adapté. Raison : c’est un layout en deux dimensions, alors que Flexbox est conçu pour du one-dimensional flow.
Exercice 3 - Grid Layout - Flexbox - Media Query¶
A vous de jouer ! Modifier et ajouter le CSS nécessaire pour rentre le site des exercices totalement responsive en utilisant:
- Grid Layout
- Flexbox
- Hamburger Menu
Pour ce faire retrouvez une base de code HTML, CSS et Javascript pour vous inspirer ici.