Layout et Responsive Design

Créer une mise en page responsive, c’est s’assurer que votre contenu reste lisible, clair et esthétique sur tous les écrans — du smartphone à l’écran géant.

📚 Concepts clés

Dans ce cours, vous allez apprendre à :

• Approfondir Flexbox pour des layouts complexes
• Découvrir CSS Grid pour des compositions avancées
• Créer des sites responsive avec les media queries
• Rendre les images et media fluides

Durée : 4 heures (1h théorie + 2h30 pratique + 30min Q&A)

---

Rappel : Le Box Model

Avant d’aborder les layouts, un rappel sur le box model CSS :

.box {
  width: 300px;
  height: 200px;
  padding: 20px;      /* Espace interne */
  border: 2px solid #000;
  margin: 10px;       /* Espace externe */
}

Taille totale = width + padding + border + margin

box-sizing: border-box

Par défaut, width ne compte pas le padding et border. C’est souvent déroutant !

/* Mieux : inclure padding et border dans width */
* {
  box-sizing: border-box;
}

.box {
  width: 300px;        /* Largeur TOTALE incluant padding et border */
  padding: 20px;
  border: 2px solid #000;
}

Bonne pratique

Ajoutez * { box-sizing: border-box; } au début de votre CSS. Cela facilite grandement le calcul des dimensions.

Démonstration interactive :

Box sizing

content-box (défaut) border-box (recommandé)

width

padding

border

margin

Contenu

Largeur du contenu :

Largeur totale (avec margin) :

⚠️ Attention : la largeur totale dépasse la valeur de width !

✅ La largeur de l'élément = width (plus prévisible)

Code CSS généré :

.box {

box-sizing: ;

width: ;

padding: ;

border: solid #E74C3C;

margin: ;

}

---

Flexbox : Approfondissement

Vous connaissez déjà les bases de Flexbox. Allons plus loin.

Flexbox

flex-direction row row-reverse column column-reverse

justify-content flex-start flex-end center space-between space-around space-evenly

align-items stretch flex-start flex-end center baseline

flex-wrap nowrap wrap wrap-reverse

gap:

Propriétés de l'item sélectionné

flex-grow:

flex-shrink:

flex-basis auto 100px 150px 200px 50%

Code CSS généré :

.container {

display: flex;

flex-direction: ;

justify-content: ;

align-items: ;

flex-wrap: ;

gap: ;

}

.item- {

flex: ;

}

Rappel des concepts de base

.container {
  display: flex;
  flex-direction: row;        /* Horizontal (défaut) */
  justify-content: flex-start; /* Alignement horizontal */
  align-items: stretch;        /* Alignement vertical */
  gap: 1rem;                   /* Espacement entre éléments */
}

flex-wrap : Passer à la ligne

.container {
  display: flex;
  flex-wrap: wrap; /* Les items passent à la ligne si pas assez de place */
  gap: 1rem;
}

Exemple pratique : Grille de cartes responsive

.chapters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.chapter-card {
  flex: 1 1 300px; /* grow, shrink, basis */
  /* Chaque carte fait minimum 300px, et grandit pour remplir l'espace */
}

Propriété flex : Contrôler la taille des items

.item {
  flex: 1 1 200px;
}
/*
  flex-grow: 1   → peut grandir
  flex-shrink: 1 → peut rétrécir
  flex-basis: 200px → taille de base
*/

Exemples pratiques :

/* Sidebar + Contenu principal */
.container {
  display: flex;
  gap: 2rem;
}

.sidebar {
  flex: 0 0 250px; /* Largeur fixe de 250px */
}

.main-content {
  flex: 1; /* Prend tout l'espace restant */
}

/* 3 colonnes égales */
.three-columns {
  display: flex;
  gap: 1rem;
}

.column {
  flex: 1; /* Chaque colonne prend 1/3 de l'espace */
}

align-content : Aligner les lignes

Quand flex-wrap: wrap créé plusieurs lignes :

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* Espace entre les lignes */
  height: 600px; /* Nécessite une hauteur définie */
}

order : Changer l’ordre visuel

.item-1 { order: 2; }
.item-2 { order: 1; }
.item-3 { order: 3; }

Utile pour réorganiser visuellement sans toucher au HTML (par exemple en responsive).

Exemple complet : Layout de page

/* Layout global de la page */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Toute la hauteur de la fenêtre */
}

header {
  flex: 0 0 auto; /* Ne grandit ni rétrécit */
}

main {
  flex: 1; /* Prend tout l'espace disponible */
}

footer {
  flex: 0 0 auto;
}

🎮 Exercice pratique : Flexbox Froggy

Pour vous entraîner avec Flexbox de manière ludique, essayez Flexbox Froggy. Ce jeu vous permet de pratiquer les propriétés Flexbox en aidant une grenouille à atteindre son nénuphar.

Recommandé

Complétez au moins les 12 premiers niveaux pour maîtriser les bases de Flexbox.

Expérimentez avec les propriétés

• Changez flex-direction, justify-content et align-items pour voir leur effet
• Cliquez sur un item pour modifier ses propriétés flex-grow, flex-shrink et flex-basis
• Le code CSS généré s’affiche en bas

---

CSS Grid : Créer des grilles

CSS Grid excelle pour créer des layouts en deux dimensions (lignes ET colonnes).

Syntaxe de base

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 colonnes égales */
  grid-template-rows: auto;            /* Hauteur automatique */
  gap: 1rem;                           /* Espacement */
}

Unité fr : Fraction de l’espace disponible

/* 3 colonnes égales */
.grid {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Colonne 1 = 2x plus large que colonnes 2 et 3 */
.grid {
  grid-template-columns: 2fr 1fr 1fr;
}

/* Mix de colonnes fixes et flexibles */
.grid {
  grid-template-columns: 250px 1fr 1fr; /* Sidebar fixe + 2 colonnes flexibles */
}

repeat() : Répéter une définition

/* Au lieu de : 1fr 1fr 1fr 1fr */
.grid {
  grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */
}

/* Colonnes de minimum 250px, autant que possible */
.grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

auto-fit et auto-fill : Grilles responsive

.chapters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

Cette grille crée automatiquement autant de colonnes que possible, chaque colonne faisant minimum 300px. Magique pour le responsive !

Placer les items avec grid-column et grid-row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Cet item occupe 2 colonnes */
.item-1 {
  grid-column: span 2; /* Étend sur 2 colonnes */
}

/* Cet item occupe la largeur complète */
.item-featured {
  grid-column: 1 / -1; /* De la ligne 1 à la dernière ligne */
}

/* Cet item occupe 2 lignes */
.item-tall {
  grid-row: span 2;
}

Exemple : Layout de galerie

<div class="gallery">
  <div class="item featured">Image 1</div>
  <div class="item">Image 2</div>
  <div class="item">Image 3</div>
  <div class="item tall">Image 4</div>
  <div class="item">Image 5</div>
  <div class="item">Image 6</div>
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.item {
  background: #f0f0f0;
  padding: 1rem;
}

.featured {
  grid-column: span 2; /* Occupe 2 colonnes */
  grid-row: span 2;    /* Occupe 2 lignes */
}

.tall {
  grid-row: span 2;
}

Grid Areas : Nommer les zones

Pour des layouts complexes :

.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 250px 1fr 1fr;
  gap: 1rem;
}

header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

---

Responsive Web Design

Le responsive design consiste à adapter votre site à toutes les tailles d’écran.

Approche Mobile-First

Commencez par designer pour mobile, puis ajoutez des styles pour écrans plus grands.

/* Styles de base (mobile) */
.container {
  padding: 1rem;
}

.columns {
  display: flex;
  flex-direction: column; /* Colonnes empilées sur mobile */
  gap: 1rem;
}

/* Tablettes et plus */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }

  .columns {
    flex-direction: row; /* Colonnes côte à côte sur tablette+ */
  }
}

/* Desktop et plus */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Breakpoints recommandés

Appareil	Min-width	Exemple
Mobile	< 768 px	iPhone, Android
Tablette	≥ 768 px	iPad, Galaxy Tab
Desktop	≥ 1024 px	Laptop
Large desktop	≥ 1440 px	Écran large

/* Mobile par défaut (< 768px) */

/* Tablette */
@media (min-width: 768px) {
  /* Styles pour tablette */
}

/* Desktop */
@media (min-width: 1024px) {
  /* Styles pour desktop */
}

/* Large desktop */
@media (min-width: 1440px) {
  /* Styles pour grands écrans */
}

Exemple interactif : Navigation responsive avec Flexbox

▶ Résultat ●

HTML CSS

Réinitialiser

Redimensionnez la fenêtre !

• Mobile : navigation verticale avec items empilés
• Tablette : navigation horizontale centrée
• Desktop : navigation spacieuse avec espacement optimal

Exemple : Grille de cartes responsive

/* Mobile : 1 colonne */
.chapters-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Tablette : 2 colonnes */
@media (min-width: 768px) {
  .chapters-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* Desktop : 3 colonnes */
@media (min-width: 1024px) {
  .chapters-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Exemple interactif : Grille CSS Grid automatiquement responsive

▶ Résultat ●

HTML CSS

Réinitialiser

La magie de CSS Grid

• Utilise repeat(auto-fit, minmax(300px, 1fr)) pour créer une grille automatiquement responsive
• Aucune media query nécessaire !
• La carte “featured” occupe 2 colonnes sur desktop avec grid-column: span 2
• Redimensionnez la fenêtre pour voir la grille s’adapter automatiquement

---

Images et media responsives

Images fluides

/* Rendre toutes les images fluides */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

object-fit : Contrôler le ratio d’aspect

.chapter-thumbnail {
  width: 100%;
  height: 250px;
  object-fit: cover; /* Couvre la zone sans déformation */
  border-radius: 1rem;
}

Valeurs de object-fit :

• cover : couvre la zone (peut rogner)
• contain : contient l’image entière (peut laisser des espaces)
• fill : étire l’image (peut déformer)

Démonstration interactive :

object-fit : cover contain fill none scale-down

Largeur du conteneur :

Hauteur du conteneur :

Aperçu avec

L'image couvre tout le conteneur. Peut rogner l'image si les proportions diffèrent.

L'image entière est visible. Peut laisser des espaces vides si les proportions diffèrent.

L'image remplit le conteneur. Peut déformer l'image si les proportions diffèrent.

L'image garde sa taille originale. Peut déborder ou laisser des espaces.

L'image utilise la plus petite taille entre "contain" et "none".

Comparaison de toutes les valeurs

cover

contain

fill

none

scale-down

Code CSS généré :

.image-container {

width: ;

height: ;

}

.image-container img {

width: 100%;

height: 100%;

object-fit: ;

}

Expérimentez avec object-fit

• Changez la valeur de object-fit pour voir son effet sur l’image
• Ajustez les dimensions du conteneur avec les sliders
• La grille en bas compare toutes les valeurs simultanément

Vidéo responsive

video {
  max-width: 100%;
  height: auto;
}

Iframe responsive (YouTube, Vimeo)

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
</div>

.video-container {
  position: relative;
  aspect-ratio: 16 / 9; /* Ratio 16:9 */
  background: black;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

---

💡 Exemple complet : Layout responsive de site d’histoire

Voici un exemple complet combinant Flexbox, CSS Grid et responsive design :

▶ Résultat ●

HTML CSS

Réinitialiser

Points clés de cet exemple

• Layout global avec Flexbox : header sticky, main flexible, footer collé en bas
• Sidebar responsive : en haut sur mobile, à gauche sur desktop
• Navigation adaptative : verticale sur mobile, horizontale sur desktop
• Grille de chapitres : 1 colonne (mobile) → 2 colonnes (tablette) → 3 colonnes (desktop)
• Transitions : effets hover sur les cartes et les liens

---

🔧 Exercices dirigés

Exercice 1 : Créer une grille responsive

Créez une grille qui affiche :

• 1 colonne sur mobile
• 2 colonnes sur tablette
• 4 colonnes sur desktop

Voir la solution

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Ou version automatique :

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Exercice 2 : Layout sidebar + contenu

Créez un layout avec :

• Sur mobile : sidebar en haut, puis contenu
• Sur desktop : sidebar à gauche (250px fixe), contenu flexible

Voir la solution

/* Mobile */
.page-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sidebar {
  /* Prend toute la largeur sur mobile */
}

.content {
  /* Prend toute la largeur sur mobile */
}

/* Desktop */
@media (min-width: 1024px) {
  .page-layout {
    flex-direction: row;
  }

  .sidebar {
    flex: 0 0 250px; /* Largeur fixe */
  }

  .content {
    flex: 1; /* Prend l'espace restant */
  }
}

---

🎯 Objectifs du fil rouge

Pendant la phase pratique, vous allez :

1. Analyser votre layout actuel (30 min)

• Identifiez les sections qui nécessitent un layout (grille, flex, etc.)
• Dessinez un schéma de layout mobile vs desktop
• Planifiez vos breakpoints

2. Créer un layout responsive avec Flexbox et/ou Grid (1h30)

• Layout global (header, main, footer)
• Navigation responsive
• Grille de contenu (chapitres, personnages, etc.)
• Sidebar si nécessaire

3. Rendre les images fluides (30 min)

• Appliquer max-width: 100% aux images
• Utiliser object-fit pour les thumbnails
• Gérer les vidéos/iframes responsive

4. Tester sur différentes tailles d’écran (1h)

• Utilisez les DevTools (F12 → mode responsive)
• Testez mobile (375px), tablette (768px), desktop (1024px+)
• Ajustez les breakpoints si nécessaire
• Vérifiez que tout est lisible et cliquable

---

📖 Ressources complémentaires

Flexbox

• Flexbox Froggy : jeu pour apprendre Flexbox
• A Complete Guide to Flexbox : guide complet

CSS Grid

• Grid Garden : jeu pour apprendre Grid
• A Complete Guide to Grid : guide complet

Responsive

• Responsive Design - MDN
• Media Queries

Outils

• Responsively App : tester sur plusieurs tailles simultanément
• Chrome DevTools : mode responsive (F12 → icône mobile)

---

✅ Checklist de fin de cours

Avant le prochain cours, assurez-vous que :

• Votre site utilise Flexbox ou Grid pour le layout
• La navigation est responsive (verticale mobile, horizontale desktop)
• Les grilles de contenu s’adaptent aux différentes tailles
• Toutes les images sont fluides (max-width: 100%)
• Le site est fonctionnel sur mobile (375px), tablette (768px) et desktop (1024px+)
• Pas de scroll horizontal sur mobile
• Les textes sont lisibles sur toutes les tailles d’écran

---

Questions fréquentes

Flexbox ou Grid ?

• Flexbox : pour des layouts en une dimension (ligne OU colonne), navigation, alignements
• Grid : pour des layouts en deux dimensions (lignes ET colonnes), grilles de cartes
• Les deux : souvent combinés dans un même projet !

Mes media queries ne fonctionnent pas, pourquoi ?

Vérifiez que vous avez le meta viewport dans votre <head> :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Quelle taille pour les breakpoints ?

Les valeurs courantes :

• Mobile : < 768px (par défaut)
• Tablette : 768px
• Desktop : 1024px
• Large desktop : 1440px

Mais adaptez selon votre contenu !

Mobile-first, c’est obligatoire ?

Non, mais c’est recommandé car :

• Vous forcez à prioriser le contenu essentiel
• C’est plus facile d’ajouter que de retirer
• Meilleure performance mobile