🧩 Exercice : Construire une grille CSS avec 4 zones structurantes

🎯 Objectif

Créer une mise en page utilisant CSS Grid, composée de :

header
nav
main
footer

La grille doit comporter 6 colonnes et un nombre de lignes libre. La position des zones doit être faite uniquement avec grid-area.

📝 Consignes

1. Structure HTML imposée

<body>
  <div class="grid-container">
    <header>HEADER</header>
    <nav>NAVIGATION</nav>
    <main>CONTENU PRINCIPAL</main>
    <footer>FOOTER</footer>
  </div>
</body>

2. Contraintes CSS

A. Définir la grille principale : 6 colonnes de même largeur, le nombre de lignes de ton choix.

B. Disposition imposée : tu dois utiliser grid-area

HEADER : occupe les 6 colonnes sur la première ligne  
NAV    : occupe 2 colonnes à gauche sur la deuxième ligne  
MAIN   : occupe les 4 colonnes restantes sur la deuxième ligne  
FOOTER : occupe les 6 colonnes sur la troisième ligne

🧩 Exercice : Grille CSS responsive avec 3 dispositions

🎯 Objectif

Créer une mise en page utilisant CSS Grid et les balises structurantes :

<header>
<nav>
<main>
<footer>

La grille doit comporter 6 colonnes et utiliser grid-area pour positionner les zones.

📱 1. Disposition mobile (< 600px)

Sur mobile, toutes les zones doivent être affichées en colonne :

header
nav
main
footer

📲 2. Disposition tablette (600–900px)

Sur tablette, la navigation doit apparaître à gauche et le contenu principal à droite :

header header header header header header
nav    nav    main   main   main   main
footer footer footer footer footer footer

🖥️ 3. Disposition desktop (> 900px)

Sur desktop, la navigation reste à gauche mais le contenu principal occupe davantage d’espace :

header header header header header header
nav    main   main   main   main   main
footer footer footer footer footer footer

🧱 Structure HTML imposée

<div class="grid-container">
  <header>HEADER</header>
  <nav>NAVIGATION</nav>
  <main>CONTENU PRINCIPAL</main>
  <footer>FOOTER</footer>
</div>

🎨 CSS à produire

L’élève doit écrire un CSS qui :

définit une grille de 6 colonnes
utilise grid-template-areas
change la disposition avec des media queries
associe chaque balise à une zone via grid-area

🧩 Exercice : Grille CSS responsive avec 12 colonnes et 3 dispositions

🎯 Objectif

Créer une mise en page utilisant CSS Grid et les balises structurantes :

<header>
<nav>
<main>
<footer>

La grille doit comporter 12 colonnes et utiliser grid-area pour positionner les zones.

📱 1. Disposition mobile (< 600px)

Sur mobile, toutes les zones doivent être affichées en colonne :

header
nav
main
footer

📲 2. Disposition tablette (600–900px)

Sur tablette, la navigation doit apparaître à gauche et le contenu principal à droite :

header header header header header header header header header header header header
nav    nav    nav    nav    main   main   main   main   main   main   main   main
footer footer footer footer footer footer footer footer footer footer footer footer

🖥️ 3. Disposition desktop (> 900px)

Sur desktop, la navigation occupe une colonne latérale et le contenu principal s’étend largement :

header header header header header header header header header header header header
nav    main   main   main   main   main   main   main   main   main   main   main
footer footer footer footer footer footer footer footer footer footer footer footer

🧱 Structure HTML imposée

<div class="grid-container">
  <header>HEADER</header>
  <nav>NAVIGATION</nav>
  <main>CONTENU PRINCIPAL</main>
  <footer>FOOTER</footer>
</div>

🎨 CSS à produire

L’élève doit écrire un CSS qui :

définit une grille de 12 colonnes
utilise grid-template-areas
change la disposition avec des media queries
associe chaque balise à une zone via grid-area

🧩 Exercice : Démonstration de auto-fit en CSS Grid

🎯 Objectif

Créer une grille responsive qui s’adapte automatiquement à la largeur de l’écran, sans utiliser de media queries. Pour cela, vous devez utiliser la propriété :

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

📝 Consignes

Créer un conteneur avec la classe grid-demo
Ajouter 8 cartes (div) contenant un numéro
Appliquer une grille utilisant auto-fit
Chaque carte doit avoir un fond coloré et un padding

📌 Résultat attendu

Lorsque vous réduisez ou agrandissez la fenêtre :

les cartes se réorganisent automatiquement
le nombre de colonnes change tout seul
la grille reste propre et équilibrée
aucune media query n’est nécessaire

🧱 Structure HTML imposée

<div class="grid-demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

🎨 CSS à produire

.grid-demo {
  display: grid;
  gap: 20px;

  /* Le cœur de l’exercice */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-demo div {
  background: lightblue;
  padding: 30px;
  text-align: center;
  font-size: 1.5rem;
  border-radius: 8px;
}