Chapitre 9 : CSS Grid Layout

1. Qu’est-ce que CSS Grid ?

CSS Grid est un système de mise en page en deux dimensions. Contrairement à Flexbox (qui gère une ligne ou une colonne), Grid permet de gérer lignes et colonnes simultanément.

2. Créer une grille de base

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

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Ce code crée une grille à 3 colonnes de même taille avec un espace de 10px entre les éléments.

3. Définir lignes et colonnes

• grid-template-columns : définit les colonnes
• grid-template-rows : définit les lignes

.grid {
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 100px;
}

4. Positionner les éléments

• grid-column : sur quelle(s) colonne(s) s'étend un élément
• grid-row : idem pour les lignes

.item2 {
  grid-column: 1 / 3;
}

<div class="grid">
  <div class="item1">A</div>
  <div class="item2">B (colonne 1 à 2)</div>
  <div class="item3">C</div>
</div>

5. Noms de zones avec grid-template-areas

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content";
  grid-template-columns: 200px 1fr;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }