Card 1
Grille auto-fit
Flexbox & Grid en pratique
Ici, la page utilise Grid pour la structure globale et Flexbox pour aligner/organiser des éléments à l’intérieur.
1) Flexbox : aligner et répartir
justify-content
Espace sur l’axe principal
align-items
Alignement sur l’axe secondaire
flex-wrap
Retour à la ligne si pas de place
gap
Espacement propre sans margins
2) Grid : grille responsive automatique
On utilise repeat(auto-fit, minmax(220px, 1fr)) pour que la grille
s’adapte automatiquement à la largeur.
Card 2
minmax + 1fr
Card 3
gap uniforme
Card 4
Responsive sans media query
Card 5
Rangs/colonnes
Card 6
Placement facile
3) Grid : zones (areas) pour une section
Très pratique pour faire un “hero” structuré (image / texte / boutons).
Hero Title
Grid areas = layout lisible et simple.
MEDIA
4) Combiner Grid + Flex
Mes sessions
Header en Flex, tableau en Grid
Today
Math
20 min
Tomorrow
CSS
15 min
Later
DP
30 min