🎯 Semaine 3 - Jour 5 : Flexbox + Grid Combinés

📚 La puissance du combo

Flexbox et Grid ne sont pas concurrents, ils sont complémentaires ! Grid pour la structure globale, Flexbox pour les composants. Découvrons comment les combiner efficacement.

⚔️ Flexbox vs Grid : Quand utiliser quoi ?

Critère	🔵 Flexbox	🟢 Grid
Dimensions	1D (ligne OU colonne)	2D (lignes ET colonnes)
Usage idéal	Composants, navigation, alignement	Layouts de page, grilles
Exemples	Navbar, cards internes, boutons, centrage	Page layout, galeries, dashboards
Contrôle	Content-out (du contenu vers le layout)	Layout-in (du layout vers le contenu)
Flexibilité	Items s'adaptent dynamiquement	Structure définie à l'avance

🏗️ Exemple 1 : Layout complet (Grid + Flex)

Structure de page : Grid pour le layout, Flex pour les composants

                    /* Grid pour la structure globale */

                    .layout {

                      display: grid;

                      grid-template-areas:

                        "header header"

                        "sidebar main"

                        "footer footer";

                    }

                    /* Flex pour le header */

                    .header {

                      display: flex;

                      justify-content: space-between;

                      align-items: center;

                    }

🐸 MonSite

Contenu Principal

Grid définit les zones, Flex aligne les éléments dans chaque zone.

🎴 Exemple 2 : Grille de Cards

Grid pour la grille, Flex à l'intérieur des cards

                    /* Grid pour disposer les cards */

                    .card-grid {

                      display: grid;

                      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

                    }

                    /* Flex à l'intérieur des cards */

                    .card-body {

                      display: flex;

                      flex-direction: column;

                    }

                    .card-actions {

                      display: flex;

                      gap: 10px;

                    }

Card Titre 1

Grid organise les cards en grille responsive.

Card Titre 2

Flex organise le contenu interne et les boutons.

Card Titre 3

Parfaite combinaison pour des layouts modernes !

📊 Exemple 3 : Dashboard

Grid pour les widgets, Flex pour leur contenu

                    .dashboard { display: grid; }

                    .widget { display: flex; flex-direction: column; }

                    .widget-header { display: flex; justify-content: space-between; }

🛍️ Exemple 4 : E-commerce Grid

Grille de produits

📱

Produit 1

Description courte

💻

Produit 2

Description courte

⌚

Produit 3

Description courte

🎧

Produit 4

Description courte

🖼️ Exemple 5 : Galerie Masonry

Grid pour le masonry, Flex pour les overlays

                    .gallery {

                      display: grid;

                      grid-auto-rows: 100px;

                    }

                    .gallery-item {

                      display: flex;

                      flex-direction: column;

                      justify-content: space-between;

                    }

📷

💡 Best Practices

✅ Utiliser Grid pour

Layout de page (header, sidebar, main, footer)
Grilles de produits / articles
Dashboards avec widgets
Galeries d'images
Structures 2D complexes

✅ Utiliser Flexbox pour

Navigation (navbar)
Contenu interne des cards
Alignement vertical/horizontal
Groupes de boutons
Composants 1D

🎯 La règle d'or

Grid = Structure globale (le squelette)
Flexbox = Composants et alignement (les muscles)

💪 Ensemble, ils créent des layouts puissants et maintenables !

Froggiesplaining :

🎯 Objectifs :
✅ Comprendre quand utiliser Grid vs Flexbox
✅ Combiner Grid (structure) et Flex (composants)
✅ Créer des layouts professionnels modernes
✅ Maîtriser le nesting (Grid dans Flex, Flex dans Grid)

📖 Points clés :
• Grid : layouts 2D, structure de page
• Flexbox : composants 1D, alignement
• Combinaison : Grid en parent, Flex en enfant
• Pas de règle absolue, tester les deux !

🏋️ Projet final Semaine 3 :
Créez une page complète e-commerce avec :
• Layout Grid (header, sidebar, main, footer)
• Navbar Flexbox dans le header
• Grille de produits Grid + cards Flex
• Dashboard widgets Grid + contenu Flex

🎯 Semaine 3 - Jour 5 : Flexbox + Grid Combinés

📚 La puissance du combo

⚔️ Flexbox vs Grid : Quand utiliser quoi ?

🏗️ Exemple 1 : Layout complet (Grid + Flex)

Structure de page : Grid pour le layout, Flex pour les composants

Contenu Principal

🎴 Exemple 2 : Grille de Cards

Grid pour la grille, Flex à l'intérieur des cards

Card Titre 1

Card Titre 2

Card Titre 3

📊 Exemple 3 : Dashboard

Grid pour les widgets, Flex pour leur contenu

Ventes

Utilisateurs

Revenue

🛍️ Exemple 4 : E-commerce Grid

Grille de produits

Produit 1

Produit 2

Produit 3

Produit 4

🖼️ Exemple 5 : Galerie Masonry

Grid pour le masonry, Flex pour les overlays

💡 Best Practices

✅ Utiliser Grid pour

✅ Utiliser Flexbox pour

🎯 La règle d'or