Partie 14 — Layout moderne 2 : CSS Grid (mises en page avancées)

Flexbox est excellent pour aligner des éléments dans une direction (ligne ou colonne). Mais quand il s’agit de construire une page complète, avec des lignes et des colonnes bien définies, CSS Grid est l’outil idéal.

CSS Grid permet de penser une page comme un tableau invisible : des zones, des colonnes, des lignes, et des espaces maîtrisés.

Dans cette partie, vous allez apprendre à utiliser Grid pour créer des mises en page modernes, claires et évolutives.

👉 Flexbox = composants | Grid = structure globale

1) Activer CSS Grid : display: grid

Comme Flexbox, Grid commence par le conteneur.

.container {
  display: grid;
}
  

Tous les éléments enfants deviennent des “grid items”.

2) Créer des colonnes avec grid-template-columns

Les colonnes définissent la structure horizontale.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}
  

Lecture humaine :

• colonne gauche : 200px
• colonne centrale : prend l’espace restant
• colonne droite : 200px

3) L’unité fr : partager l’espace intelligemment

L’unité fr signifie “fraction de l’espace disponible”.

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

Ici, la deuxième colonne est deux fois plus large que la première.

4) Créer des lignes avec grid-template-rows

.layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
  

Cas réel : header, contenu principal, footer.

5) gap : gérer les espacements

.grid {
  display: grid;
  gap: 16px;
}
  

gap remplace margin et rend le layout plus propre.

6) grid-template-areas : penser la page par zones

Grid permet de nommer des zones de la page.

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

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

Lecture humaine : la sidebar reste fixe à gauche, le contenu change à droite.

7) Grilles responsives automatiques

Grid permet de créer des grilles adaptatives sans media queries.

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

Cas réel : galerie, produits, articles, tutoriels.

8) CSS Grid vs Flexbox

• Flexbox : alignement sur un axe
• Grid : lignes + colonnes
• Flexbox : composants
• Grid : layout global

9) Erreurs fréquentes avec CSS Grid

• Utiliser Grid pour de simples alignements
• Ne pas nommer les zones
• Oublier minmax pour le responsive
• Multiplier les media queries inutilement

Vous savez maintenant créer des mises en page avancées avec CSS Grid : structures complètes, zones nommées et grilles adaptatives.

Dans la Partie 15, nous allons aborder le responsive design et les media queries (approche mobile-first).

✅ CSS Grid est l’outil ultime pour structurer des pages modernes.