📘 Chapitre 4 – Grid Layout

1. 🎯 Objectif pédagogique

Savoir utiliser le système CSS Grid pour créer des mises en page complexes et adaptatives, en définissant des lignes, colonnes et zones.

2. 📚 Concepts abordés

  • Propriété display: grid
  • Définition des colonnes et lignes : grid-template-columns, grid-template-rows
  • Espacement : gap, row-gap, column-gap
  • Positionnement des éléments : grid-column, grid-row
  • Notions de fr (fraction), unités et zones nommées

3. 🧠 Explication théorique

CSS Grid est un système de grille bidimensionnel qui permet de disposer les éléments à la fois sur l’axe horizontal (colonnes) et vertical (lignes).

Exemple simple de grille :

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 colonnes de largeur égale */
  gap: 10px; /* Espacement entre les éléments */
}

Positionner un élément :

.item1 {
  grid-column: 1 / 3; /* S’étend de la colonne 1 à la 2 (excluant la 3) */
  grid-row: 1;
}

4. 🛠 Tutoriel pratique

Résumé du travail : Créer une page avec un layout 3 zones (header, contenu, sidebar, footer) en utilisant CSS Grid.

Arborescence du projet :

mon_projet/
├── index.html
└── style.css

Étape 1 : Structure HTML 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple Grid Layout</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <header class="header">Header</header>
      <aside class="sidebar">Sidebar</aside>
      <main class="content">Contenu principal</main>
      <footer class="footer">Footer</footer>
    </div>
  </body>
</html>

Étape 2 : Styles CSS 

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 2 colonnes : sidebar + contenu */
  grid-template-rows: 80px 1fr 60px; /* header + contenu + footer */
  gap: 10px;
  height: 100vh;
}

.header {
  grid-column: 1 / 3; /* Occupe les 2 colonnes */
  background: #3498db;
  color: white;
  text-align: center;
  line-height: 80px;
}

.sidebar {
  background: #2ecc71;
  padding: 10px;
}

.content {
  background: #ecf0f1;
  padding: 10px;
}

.footer {
  grid-column: 1 / 3;
  background: #34495e;
  color: white;
  text-align: center;
  line-height: 60px;
}

5. 🧾 Résumé et points-clés

  • display: grid permet de définir une grille bidimensionnelle (lignes et colonnes).
  • grid-template-columns et grid-template-rows définissent la structure.
  • gap gère l’espace entre les cellules de la grille.
  • CSS Grid facilite la création de layouts complexes et responsives.