🎯 Semaine 3 - Jour 4 : CSS Grid Avancé

📚 Objectifs du jour

Techniques avancées Grid : grid-auto-flow, line names, minmax(), auto-fit vs auto-fill, dense packing, et création de layouts complexes.

🔄 grid-auto-flow

row (défaut)

.grid {
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
}
1
2
3
4
5

Les items se placent ligne par ligne

column

.grid {
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 100px);
}
1
2
3
4

Les items se placent colonne par colonne

📍 Positionnement avec lignes

grid-column / grid-row - Placer précisément

.item {
  grid-column: 2 / 4; /* De la ligne 2 à 4 (colonnes) */
  grid-row: 1 / 3; /* De la ligne 1 à 3 (rangées) */
}
1
Item large
(col: 2/4, row: 1/3)
3
4
5
6

🏷️ Nommer les lignes

Line Names - Noms personnalisés pour les lignes

.grid {
  grid-template-columns:
    [sidebar-start] 200px
    [sidebar-end main-start] 1fr
    [main-end];
}

.header {
  grid-column: sidebar-start / main-end;
}
HEADER
SIDEBAR
MAIN
FOOTER

📐 minmax(), auto-fill, auto-fit

minmax() - Taille min et max

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
Min 200px
Flexible
Responsive

💡 Magic : Créez des grilles responsive sans media queries !

auto-fill

repeat(auto-fill, minmax(150px, 1fr));
1
2
3

Remplit avec autant de colonnes que possible

auto-fit

repeat(auto-fit, minmax(150px, 1fr));
1
2
3

Étire les items pour remplir l'espace

🧩 grid-auto-flow: dense

Dense Packing - Combler les trous

.grid {
  grid-auto-flow: dense;
}
1
BIG
(2×2)
3
4
WIDE (2×1)
6
7
8

✅ Usage : Galeries d'images, Pinterest-style layouts

🎨 Masonry-like Layout

Style Pinterest avec grid-row: span

.grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 80px;
}

.item-tall { grid-row: span 2; }
.item-very-tall { grid-row: span 3; }
Item 1
Tall (span 2)
Item 3
Very Tall
(span 3)
Item 5
Tall (span 2)
Item 7
Item 8

🎓 Récapitulatif

Techniques avancées

  • grid-auto-flow: row | column | dense
  • grid-column: 2 / 4 : placement précis
  • Line names: [sidebar-start] etc.
  • minmax(200px, 1fr) : taille flexible
  • auto-fit vs auto-fill : responsive
  • grid-row: span 2 : masonry

Formules magiques

/* Responsive sans media query */
grid-template-columns:
  repeat(auto-fit,
    minmax(300px, 1fr));

/* Layout dense */
grid-auto-flow: dense;

/* Masonry */
grid-auto-rows: 100px;
.item { grid-row: span 2; }
Froggiesplaining :


🎯 Objectifs :
✅ Maîtriser grid-auto-flow (row, column, dense)
✅ Positionner avec grid-column/row et lignes nommées
✅ Utiliser minmax() pour des grilles flexibles
✅ Comprendre auto-fit vs auto-fill
✅ Créer des layouts type masonry

📖 Points clés :
• repeat(auto-fit, minmax(300px, 1fr)) = responsive magic
• grid-auto-flow: dense = comble les trous
• grid-row: span 2 = hauteur variable
• Line names = code plus lisible

🏋️ Exercice :
Créez une galerie d'images type Pinterest avec :
• Grille responsive (auto-fit + minmax)
• Hauteurs variables (span 1, 2 ou 3)
• Dense packing pour combler les espaces

Froggie

GitHub - eCrea