🎯 Semaine 3 - Jour 3 : Introduction CSS Grid

📚 Qu'est-ce que CSS Grid ?

CSS Grid est un système de mise en page bidimensionnel (lignes ET colonnes) qui permet de créer des layouts complexes facilement. C'est l'outil le plus puissant pour la mise en page web moderne.

Différence avec Flexbox : Flexbox = 1 dimension (ligne OU colonne), Grid = 2 dimensions (lignes ET colonnes)

🎨 Concept de base

Activation de Grid

.container {
  display: grid;
}
1
2
3

📌 Note : Par défaut, les items sont en 1 colonne

Terminologie Grid

  • Grid Container : élément parent avec display: grid
  • Grid Items : enfants directs du container
  • Grid Line : ligne séparatrice
  • Grid Track : ligne ou colonne
  • Grid Cell : intersection ligne/colonne
  • Grid Area : zone rectangulaire de cellules

📐 grid-template-columns

3 colonnes égales

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* ou repeat(3, 1fr) */
}
1
2
3
4
5
6

fr : "fraction" - part égale de l'espace disponible

Colonnes avec proportions

grid-template-columns: 1fr 2fr 1fr;
1fr
2fr (double)
1fr

La colonne du milieu fait le double des autres

Colonnes mixtes (px + fr)

grid-template-columns: 200px 1fr 150px;
200px
1fr (flexible)
150px

✅ Usage : Sidebar fixe + contenu flexible

auto-fit (responsive)

grid-template-columns:
  repeat(auto-fit,
    minmax(150px, 1fr));
1
2
3
4
5
6

🌟 Magique : S'adapte automatiquement à la largeur !

📏 grid-template-rows

Définir la hauteur des lignes

.grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 150px 100px;
}
100px
100px
100px
150px
150px
150px
100px
100px
100px

📦 gap (espacement)

Sans gap

1
2
3

Avec gap: 20px

1
2
3
.grid {
  gap: 20px;
  /* ou */
  row-gap: 20px;
  column-gap: 20px;
}

🎯 grid-column & grid-row

Faire des items qui occupent plusieurs cellules

.item1 { grid-column: span 2; }
.item3 { grid-column: span 3; }
span 2 colonnes
Normal
span 3 colonnes (toute la largeur)
4
5

🗺️ grid-template-areas

Layout complexe avec noms de zones

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
HEADER
SIDEBAR
MAIN CONTENT
FOOTER

🌟 Incroyable : Cette technique permet de visualiser la structure directement dans le CSS ! C'est très lisible et maintenable.

⚔️ Flexbox vs Grid

Quand utiliser Flexbox ?

  • ✅ Navigation (navbar)
  • ✅ Alignement d'éléments en ligne
  • ✅ Centrage simple
  • ✅ Petits composants (cards, buttons)
  • ✅ Ordre flexible des éléments

Résumé : 1 dimension, composants

Quand utiliser Grid ?

  • ✅ Layout de page complet
  • ✅ Galeries d'images
  • ✅ Tableaux de bord (dashboards)
  • ✅ Grilles de produits
  • ✅ Layouts complexes 2D

Résumé : 2 dimensions, layouts

💡 La meilleure approche

Utilisez Grid pour la structure globale, et Flexbox pour les composants !
Ils sont complémentaires, pas concurrents. On peut (et doit) les combiner.

Froggiesplaining :


🎯 Objectifs :
✅ Comprendre le concept de CSS Grid (2 dimensions)
✅ Créer des colonnes avec grid-template-columns
✅ Utiliser les unités fr, px, auto-fit
✅ Espacer avec gap
✅ Utiliser grid-template-areas pour des layouts complexes

📖 Résumé :
• display: grid active Grid
• fr = fraction flexible
• repeat(3, 1fr) = 3 colonnes égales
• auto-fit = responsive automatique
• gap = espacement entre cellules
• grid-template-areas = nommer les zones

🏋️ Exercice :
Créez un layout avec header, sidebar, main et footer en utilisant grid-template-areas !

Froggie

GitHub - eCrea