Mise en page responsive avec Flexbox et CSS Grid
Mise en page responsive (Flexbox, Grid) est un cours de niveau intermédiaire de 6 leçons (environ 3 h 45), avec 18 exercices et 18 questions de quiz. Prérequis : CSS fondamentaux. Les exercices s'exécutent dans le navigateur, sans installation.
- Front-end
- Intermédiaire
- 6 leçons
- 3 h 45
- 18 exercices
- Exercices exécutés dans le navigateur
Le cours en bref
Ce cours vous apprend à construire des mises en page robustes et adaptatives avec les outils modernes de CSS. Vous alignerez des éléments avec Flexbox, structurerez des pages et des catalogues avec Grid, puis rendrez vos sites responsive en mobile first, avant d'aborder les techniques récentes : valeurs fluides, container queries et images adaptatives. Le projet final est la page d'accueil responsive complète d'une boutique.
Ce que tu sauras faire
- Aligner et répartir des éléments sur un axe avec Flexbox
- Construire des grilles et des gabarits de page avec CSS Grid et les zones nommées
- Créer des grilles adaptables sans media query (flex-wrap, auto-fit, minmax)
- Écrire des media queries selon l'approche mobile first
- Utiliser clamp(), les container queries et les images responsives
- Choisir l'outil de mise en page adapté à chaque situation
Programme des 6 leçons
- Créer un conteneur flex et comprendre axe principal et axe secondaire
- Aligner et répartir des éléments avec justify-content et align-items
- Espacer des éléments avec gap
- 02
Flexbox : tailles flexibles et retour à la ligne
- Contrôler la taille des éléments avec flex-grow, flex-shrink et flex-basis
- Faire passer des éléments à la ligne avec flex-wrap
- Construire des rangées de cartes adaptables sans media query
- 03
CSS Grid : colonnes et lignes
- Définir une grille avec grid-template-columns et l'unité fr
- Utiliser repeat(), minmax() et auto-fit pour une grille adaptable
- Choisir entre Flexbox et Grid
- 04
CSS Grid : zones nommées et placement
- Construire un gabarit de page avec grid-template-areas
- Placer et étendre des éléments avec grid-column et grid-row
- Comprendre les lignes de grille numérotées
- 05
Media queries et approche mobile first
- Configurer correctement le viewport et rendre les médias fluides
- Écrire des media queries selon l'approche mobile first
- Choisir des points de rupture selon le contenu
- 06
Responsive moderne : clamp(), container queries et images adaptatives
- Créer une typographie et des espacements fluides avec clamp()
- Adapter un composant à la taille de son conteneur avec les container queries
- Servir des images adaptées avec srcset, sizes et aspect-ratio
Valeurs fluides avec clamp()Container queriesImages responsives
Projet final
Page d'accueil responsive d'une boutique en ligne
Réalisez la page d'accueil d'une boutique fictive, en mobile first : en-tête avec logo, recherche et panier (Flexbox), bannière avec titre fluide, catalogue de produits en grille auto-adaptative, produit vedette étendu, barre latérale de filtres et pied de page. Une carte produit réutilisable doit s'adapter à son emplacement avec une container query.
Livrables
- index.html sémantique et style.css
- Captures d'écran à 375px, 768px et 1280px de large
- Un gabarit de page en grid-template-areas qui change entre mobile et ordinateur
- Une carte produit utilisée à deux emplacements de largeurs différentes
Critères d'évaluation
- Meta viewport présente, aucun défilement horizontal à 320px
- Styles de base mobile et media queries min-width placées après
- Flexbox et Grid employés à bon escient, espacements avec gap
- Catalogue en repeat(auto-fit, minmax(...)) sans débordement
- Typographie fluide avec clamp() intégrant une unité rem
- Images fluides, avec aspect-ratio ou dimensions et srcset pour la bannière
- Ordre du HTML logique malgré le placement visuel
Questions fréquentes
Faut-il choisir entre Flexbox et Grid ?
Non, ils sont complémentaires. Flexbox aligne des éléments sur un axe (menus, barres d'outils), Grid organise en lignes et colonnes (catalogues, gabarits). Le cours montre quand utiliser chacun et comment les combiner.
Quels prérequis pour ce cours de mise en page responsive ?
Il faut connaître les bases de HTML et de CSS : sélecteurs, cascade et modèle de boîte, enseignés dans les cours HTML fondamentaux et CSS fondamentaux.
Les container queries sont-elles utilisables en production ?
Oui, elles sont prises en charge par tous les navigateurs majeurs depuis 2023. Le cours les présente aux côtés des media queries, qui restent indispensables pour la mise en page globale.
Qu'est-ce que l'approche mobile first ?
C'est le fait d'écrire d'abord les styles pour petit écran, puis d'ajouter des adaptations pour les écrans plus larges avec des media queries min-width. Le code est plus simple et le contenu essentiel est priorisé.
Ce cours, raconté pour ton métier
Dis ce que tu veux savoir faire : « Mise en page responsive (Flexbox, Grid) » prend sa place dans ton parcours, avec des exemples de ton secteur. Les notions restent celles du cours.