CSS Grid

1. Comprendre CSS Grid

CSS Grid est la plus grande avancée en CSS depuis Flexbox. Là où Flexbox gère un axe à la fois (soit les lignes, soit les colonnes), Grid gère les deux axes simultanément. C'est l'outil idéal pour les mises en page de page complète.

Grid vs Flexbox — Quand utiliser quoi ?

╔═══════════════════════════════════════════════════════════════╗
║                    FLEXBOX (1 dimension)                     ║
╠═══════════════════════════════════════════════════════════════╣
║  • Direction : ligne OU colonne (pas les deux)              ║
║  • Idéal pour : navbar, boutons, cartes, sidebar+contenu    ║
║  • Contenu premier (content-first)                          ║
║                                                             ║
║  ──[1]──[2]──[3]──[4]──  ← une seule ligne flex           ║
╚═══════════════════════════════════════════════════════════════╝

╔═══════════════════════════════════════════════════════════════╗
║                    CSS GRID (2 dimensions)                   ║
╠═══════════════════════════════════════════════════════════════╣
║  • Lignes ET colonnes en même temps                         ║
║  • Idéal pour : layouts de page, dashboards, grilles        ║
║  • Layout premier (layout-first)                            ║
║                                                             ║
║  ┌────┬────┬────┐                                           ║
║  │ 1  │ 2  │ 3  │  ← grille avec lignes ET colonnes       ║
║  ├────┼────┼────┤                                           ║
║  │ 4  │ 5  │ 6  │                                           ║
║  └────┴────┴────┘                                           ║
╚═══════════════════════════════════════════════════════════════╝

2. Syntaxe détaillée

2.1 Propriétés du conteneur (parent)

display: grid — Activer CSS Grid

.conteneur {
  display: grid;          /* Grille block */
  display: inline-grid;   /* Grille en ligne */
}

grid-template-columns / grid-template-rows

/* Colonnes fixes */
.grille {
  grid-template-columns: 200px 1fr 200px;   /* 3 colonnes */
}

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

/* Avec repeat() */
.grille {
  grid-template-columns: repeat(3, 1fr);    /* Raccourci pour 3 colonnes égales */
}

/* Lignes */
.grille {
  grid-template-rows: auto 1fr auto;        /* header, main, footer */
}

/* Combinaison */
.grille {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
}

grid-template-columns: 200px 1fr 200px;
                      │      │      │
    ┌──── 200px ────┬─┤  1fr ├─┬──── 200px ────┐
    │               │ │      │ │               │
    │  Col 1 (fixe) │ │ Col 2 │ │  Col 3 (fixe)│
    │               │ │(fluid)│ │               │
    └───────────────┘ └───────┘ └───────────────┘

    fr = fraction de l'espace disponible
    1fr 1fr 1fr = 3 colonnes égales (chaque = 1/3)
    2fr 1fr     = colonne 1 × 2× plus large que colonne 2

grid-template-areas — Zones nommées

.grille {
  grid-template-areas:
    "header  header  header"
    "sidebar content content"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

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

grid-template — Le raccourci

/* Raccourci pour les 3 propriétés template */
.grille {
  grid-template:
    "header  header  header" auto
    "sidebar content content" 1fr
    "footer  footer  footer" auto
    / 200px 1fr 1fr;
}

/* Syntaxe : "zones" hauteur / largeur colonnes */

gap — Espacement de la grille

.grille {
  gap: 1rem;              /* Gap uniforme horizontal + vertical */
  row-gap: 1rem;          /* Gap vertical uniquement */
  column-gap: 2rem;       /* Gap horizontal uniquement */
}

justify-items / align-items / place-items

.grille {
  justify-items: start;     /* Aligné à gauche de la zone */
  justify-items: end;       /* Aligné à droite de la zone */
  justify-items: center;    /* Centré dans la zone */
  justify-items: stretch;   /* Remplit toute la zone (défaut) */

  align-items: start;       /* Aligné en haut */
  align-items: end;         /* Aligné en bas */
  align-items: center;      /* Centré verticalement */
  align-items: stretch;     /* Remplit (défaut) */

  place-items: center;      /* Raccourci : center center */
  place-items: start end;   /* start horizontalement, end verticalement */
}

justify-content / align-content / place-content

.grille {
  /* Centre la grille dans le conteneur */
  justify-content: center;
  align-content: center;
  place-content: center;
}

2.2 Propriétés des items (enfants)

grid-column / grid-row — Placement par coordonnées

/* Un item qui prend toute la première ligne */
.header {
  grid-column: 1 / 4;  /* Colonne 1 → colonne 4 (3 colonnes) */
}

/* Raccourci : span = étendre sur N colonnes */
.header {
  grid-column: 1 / span 3;  /* Depuis la colonne 1, étend sur 3 */
}

/* Tout le premier */
.header {
  grid-column: 1 / -1;  /* Du début à la fin */
}

/* Item sur 2 lignes */
.sidebar {
  grid-row: 1 / 3;  /* Ligne 1 → ligne 3 (2 lignes) */
}

grid-area — Placer par nom ou par coordonnées

/* Par nom (quand grid-template-areas est défini) */
.item { grid-area: header; }

/* Par coordonnées (raccourci grid-column + grid-row) */
.item {
  grid-area: 1 / 1 / 3 / 4;  /* row-start / col-start / row-end / col-end */
}

justify-self / align-self / place-self — Override individuel

/* Un item qui ne suit pas l'alignement du conteneur */
.item-special {
  justify-self: end;    /* Aligné à droite de SA zone */
  align-self: start;    /* Aligné en haut de SA zone */
  place-self: center;   /* Centré dans SA zone */
}

2.3 Fonctions avancées

repeat() — Répéter des colonnes/lignes

/* Au lieu de : 1fr 1fr 1fr 1fr 1fr */
.grille {
  grid-template-columns: repeat(5, 1fr);
}

/* Répétition avec motif */
.grille {
  grid-template-columns: repeat(3, 1fr 2fr);  /* 1fr 2fr 1fr 2fr 1fr 2fr */
}

minmax() — Taille min/max

/* Colonnes entre 100px et 1fr */
.grille {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

/* Colonnes entre 200px et 400px */
.grille {
  grid-template-columns: repeat(4, minmax(200px, 400px));
}

auto-fit vs auto-fill — La magie du responsive sans media queries

/* Les colonnes s'adaptent automatiquement ! */
.grille-responsive {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* auto-fit : les colonnes vides sont "écrasées" (expand les autres) */
/* auto-fill : les colonnes vides restent (même si vides) */

/* La plupart du temps, on utilise auto-fit pour un rendu "rempli" */
.grille-remplie {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

auto-fill (crée des colonnes vides si l'espace le permet) :
┌────┬────┬────┬────┬────┬────┐
│ 1  │ 2  │ 3  │    │    │    │  ← 3 colonnes vides restent
└────┴────┴────┴────┴────┴────┘

auto-fit (écrase les colonnes vides, expand les pleines) :
┌────────┬────────┬────────┐
│   1    │   2    │   3    │  ← Les 3 items prennent tout
└────────┴────────┴────────┘

En pratique : auto-fit est plus courant car il remplit l'espace

min-content, max-content, fit-content()

.grille {
  grid-template-columns: min-content 1fr max-content;
  /* Colonne 1 : largeur minimale du contenu */
  /* Colonne 2 : prend le reste */
  /* Colonne 3 : largeur maximale du contenu */
}

.grille {
  grid-template-columns: 1fr fit-content(300px) 1fr;
  /* Colonne 2 : max 300px, sinon taille du contenu */
}

subgrid — La grille dans la grille (moderne)

/* Parent */
.grille-carte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 1rem;
}

/* Enfant — hérite des lignes du parent */
.carte {
  display: grid;
  grid-template-rows: subgrid;  /* Utilise les 4 lignes du parent */
  grid-row: span 4;             /* Prend 4 lignes */
}

/* Résultat : tous les titres, contenus et boutons sont alignés
   entre les cartes, même si le contenu est différent ! */

Grid + Media Queries pour le responsive

/* Grille responsive complète */
.page-layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
  gap: 1rem;
}

@media (max-width: 768px) {
  .page-layout {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

/* Ou encore plus simple avec auto-fit */
.grille {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* Pas besoin de media query ! */
}

3. Visualisation

3.1 Grid lines — Les lignes de la grille

grid-template-columns: 200px 1fr 200px;
grid-template-rows: 60px 1fr 60px;

         Col 1      Col 2      Col 3
        (200px)    (auto)     (200px)
       ┌──────────────────────────────┐ ── Ligne 1 ──┐
       │         HEADER               │              │
  L.1  ├──────────────────────────────┤ ── Ligne 2 ──┤ 60px
       │          │                   │              │
       │ SIDEBAR  │     CONTENT       │              │
  L.2  │          │                   │              │ 1fr
       │          │                   │              │
       ├──────────────────────────────┤ ── Ligne 3 ──┤
       │         FOOTER               │              │ 60px
  L.3  └──────────────────────────────┘ ── Ligne 4 ──┘

       ↑         ↑                    ↑              ↑
     Ligne 1   Ligne 2             Ligne 3        Ligne 4

Les items sont placés ENTRE les lignes :
  header  = ligne 1 / ligne 2 (sur toute la largeur)
  sidebar = ligne 2 / ligne 3, colonne 1
  content = ligne 2 / ligne 3, colonne 2-3

3.2 Grid overlay — Visualisation interactive

3.3 Résumé de toutes les propriétés

╔════════════════════════════════════════════════════════════════╗
║  PROPRIÉTÉS DU CONTENEUR                                      ║
╠════════════════════════════════════════════════════════════════╣
║  display: grid | inline-grid                                  ║
║  grid-template-columns / rows / areas / shorthand             ║
║  gap | row-gap | column-gap                                   ║
║  justify-items | align-items | place-items                    ║
║  justify-content | align-content | place-content              ║
╚════════════════════════════════════════════════════════════════╝

╔════════════════════════════════════════════════════════════════╗
║  PROPRIÉTÉS DES ITEMS                                         ║
╠════════════════════════════════════════════════════════════════╣
║  grid-column / grid-row (start / end)                         ║
║  grid-area (nom ou coordonnées)                               ║
║  justify-self | align-self | place-self                       ║
╚════════════════════════════════════════════════════════════════╝

╔════════════════════════════════════════════════════════════════╗
║  FONCTIONS AVANCÉES                                           ║
╠════════════════════════════════════════════════════════════════╣
║  repeat(n, taille) — répéter des colonnes/lignes              ║
║  minmax(min, max) — plage de taille                           ║
║  auto-fit — colonnes flexibles (expand les vides)             ║
║  auto-fill — colonnes flexibles (garde les vides)             ║
║  min-content / max-content — taille du contenu                ║
║  fit-content(max) — max avec taille du contenu                ║
║  subgrid — hériter la grille du parent                        ║
╚════════════════════════════════════════════════════════════════╝

3.4 Grid cheat sheet

4. Exemples progressifs

4.1 Pinterest / Layout Masonry

/* Grille masonry avec grid-auto-rows */
.masonry {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: 10px;  /* Unité fine pour contrôler la hauteur */
}

/* Chaque carte a une hauteur différente */
.masonry-item:nth-child(1) { grid-row: span 15; }
.masonry-item:nth-child(2) { grid-row: span 25; }
.masonry-item:nth-child(3) { grid-row: span 10; }

/* Note : le vrai masonry (comme Pinterest) nécessite
   column-count ou JavaScript, car CSS Grid ne "tasse"
   pas les items verticalement de la même façon */

4.2 Dashboard layout avec grid-template-areas

.dashboard {
  display: grid;
  grid-template-areas:
    "nav    header  header"
    "nav    stats   stats"
    "nav    chart   sidebar"
    "nav    footer  footer";
  grid-template-columns: 60px 1fr 1fr;
  grid-template-rows: 50px auto 1fr auto;
  gap: 1rem;
  min-height: 100vh;
}

.nav     { grid-area: nav; }
.header  { grid-area: header; }
.stats   { grid-area: stats; }
.chart   { grid-area: chart; }
.sidebar { grid-area: sidebar; }
.footer  { grid-area: footer; }

4.3 Galerie d'images avec spans

.gallery {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 120px;
}

/* Items qui prennent plus de place */
.gallery .featured {
  grid-column: span 2;        /* 2 colonnes */
  grid-row: span 2;           /* 2 lignes */
}

.gallery .wide {
  grid-column: span 2;        /* 2 colonnes, 1 ligne */
}

.gallery .tall {
  grid-row: span 2;           /* 1 colonne, 2 lignes */
}

4.4 Portfolio avec auto-fit

/* Portfolio responsive SANS media query ! */
.portfolio {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.portfolio-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px -5px rgba(0,0,0,0.1);
}

4.5 Panneau d'administration

.admin {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 50px 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  min-height: 100vh;
}

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

@media (max-width: 768px) {
  .admin {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }
  .sidebar { display: none; }
}

4.6 Blog avec sidebar

/* Layout blog responsive */
.blog {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
}

/* Sur mobile, la sidebar passe en bas */
@media (max-width: 768px) {
  .blog {
    grid-template-columns: 1fr;
  }
}

4.7 Layout magazine / journal

/* Layout magazine avec des zones de tailles variées */
.magazine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 1rem;
}

.hero-article {
  grid-column: span 3;
  grid-row: span 2;
}

.side-article {
  grid-row: span 2;
}

.wide-article {
  grid-column: span 2;
}

4.8 Grille de cartes responsive (auto-fit)

/* La magie : auto-fit + minmax() = responsive SANS media query */
.grille {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Résultat :
   - Desktop large : 4 colonnes
   - Desktop : 3 colonnes
   - Tablette : 2 colonnes
   - Mobile : 1 colonne
   ET tout ça sans aucune media query ! */

5. Erreurs fréquentes

/* FAUX — les propriétés grid n'ont aucun effet */
.parent {
  grid-template-columns: 1fr 1fr;  /* Ignoré ! */
}

/* CORRECT — activer Grid d'abord */
.parent {
  display: grid;                   /* Obligatoire ! */
  grid-template-columns: 1fr 1fr;
}

/* Les colonnes = LARGEUR (axe horizontal) */
grid-template-columns: 200px 1fr;  /* 2 colonnes */

/* Les lignes = HAUTEUR (axe vertical) */
grid-template-rows: 100px auto;   /* 2 lignes */

/* L'erreur : définir des colonnes quand on veut des lignes */
.grille {
  grid-template-columns: 100px 100px 100px;  /* 3 COLONNES */
}
/* Pour 3 LIGNES, c'est grid-template-rows */

/* SURCOMPLEXE — Grid n'est pas nécessaire ici */
.parent {
  display: grid;
  justify-items: center;
}

/* SIMPLIFIER avec Flexbox */
.parent {
  display: flex;
  justify-content: center;
}

/* Grid =布局 layout global
   Flexbox = composants, alignement, distribution */

/* Les lignes commencent à 1, pas 0 ! */
.item {
  grid-column: 1 / 3;  /* Colonne 1 → colonne 3 (2 colonnes) */
  /* PAS grid-column: 0 / 2 ! */
}

/* Pour aller jusqu'à la fin */
.item {
  grid-column: 1 / -1;  /* Du début à la fin (raccourci) */
}

/* SURCOMPLEXE — 3 media queries pour une grille */
@media (min-width: 1200px) { .grille { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grille { grid-template-columns: 1fr; } }

/* SIMPLE — auto-fit + minmax = 0 media query */
.grille {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* FAUX — on ne mélange pas les deux méthodes */
.grille {
  grid-template-areas: "header header" "sidebar content";
}
.header {
  grid-area: header;           /* Méthode 1 : par nom */
  grid-column: 1 / 3;         /* CONFLIT avec grid-area ! */
}

/* CORRECT — choisir UNE méthode */
.header {
  grid-area: header;  /* Méthode par nom */
}
/* OU */
.header {
  grid-column: 1 / 3;  /* Méthode par coordonnées */
}

/* auto-fill : garde les colonnes vides */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* Si l'espace permet 5 colonnes mais il n'y a que 3 items,
   il y aura 5 colonnes (2 vides) */

/* auto-fit : écrase les colonnes vides, expand les pleines */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* Même situation : les 3 items s'étendent pour remplir les 5 slots */

/* En pratique : on utilise auto-fit la plupart du temps */

/* justify-items = aligne les items DANS leur zone */
/* justify-content = aligne la GRILLE dans le conteneur */

/* Si la grille fait 600px dans un conteneur de 1000px */
.grille {
  justify-content: center;  /* Centre la grille de 600px */
  justify-items: center;    /* Centre chaque item dans sa zone */
}

/* Les deux sont différents et complémentaires ! */

6. Bonnes pratiques

/* Holy Grail */
.page {
  display: grid;
  grid-template-areas: "header header" "nav main" "footer footer";
  grid-template-columns: 200px 1fr;
}

/* Cards responsive */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Sidebar */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1.5rem;
}

/* Dashboard */
.dashboard {
  display: grid;
  grid-template-areas: "nav header" "nav main" "nav footer";
  grid-template-columns: 60px 1fr;
}

/* Gallery avec spans */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 120px;
}
.gallery .featured { grid-column: span 2; grid-row: span 2; }

/* Centrer */
.center {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

7. Mini-défi

.page {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  grid-template-columns: 200px 1fr;
  min-height: 100vh;
}

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

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

/* C'est tout ! Le responsive est automatique :
   - > 1100px : 4 colonnes
   - 800-1100px : 3 colonnes
   - 550-800px : 2 colonnes
   - < 550px : 1 colonne */

.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 0.5rem;
}

.item-1 { grid-column: span 2; grid-row: span 2; }
.item-2 { grid-row: span 2; }
/* items 3-12 : taille normale */

8. Projets pratiques

9. Révision

Récapitulatif des concepts clés

Quiz rapide

1. Quelle propriété active CSS Grid sur un conteneur ?
2. Quelle est la différence fondamentale entre Grid et Flexbox ?
3. Comment définir 3 colonnes égales avec Grid ?
4. Quelle fonction permet de créer des colonnes responsive sans media query ?
5. Quelle est la différence entre auto-fit et auto-fill ?
6. Comment placer un item sur toute la première ligne ?
7. Que fait grid-template-areas ?
8. Comment aligner un item au centre de SA zone de grille ?
9. Que signifie 1fr dans grid-template-columns ?
10. Quand utiliser Grid plutôt que Flexbox ?

Cheat sheet rapide

/* Grille responsive de cartes */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Layout de page */
.page {
  display: grid;
  grid-template-areas: "header header" "nav main" "footer footer";
  grid-template-columns: 200px 1fr;
}

/* Centrer */
.center {
  display: grid;
  place-items: center;
}

/* Galerie avec spans */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 120px;
}
.gallery .featured { grid-column: span 2; grid-row: span 2; }

/* Sidebar */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1.5rem;
}