Grid + Flexbox - quand utiliser l'un ou l'autre

Dans la boîte à outils d'un architecte égyptien, il y avait différents instruments - un burin pour la taille précise et un levier pour déplacer de gros blocs. De même, en CSS, tu disposes de deux systèmes de mise en page puissants : CSS Grid et Flexbox. Chacun a ses forces et ses cas d'usage idéaux. Apprenons quand saisir tel ou tel outil !

CSS Grid - une mise en page bidimensionnelle

CSS Grid est un système bidimensionnel - tu contrôles à la fois les colonnes ET les lignes simultanément. Utilise-le quand tu as besoin d'un contrôle total sur la mise en page selon les deux axes :

1/* Grid : idéal pour les mises en page de page entières */
2.page-layout {
3  display: grid;
4  grid-template-areas:
5    "header  header  header"
6    "nav     main    aside"
7    "footer  footer  footer";
8  grid-template-columns: 200px 1fr 250px;
9  grid-template-rows: auto 1fr auto;
10  min-height: 100vh;
11}

Quand choisir Grid :

• Mises en page de pages entières - header, barre latérale, contenu principal, footer
• Galeries et tableaux de bord - grilles de cartes de tailles diverses
• Éléments à positions fixes - placement précis dans la grille
• Quand tu as besoin de contrôle sur les deux axes simultanément
• Éléments qui se chevauchent - grid permet le chevauchement

Flexbox - une mise en page unidimensionnelle

Flexbox est un système unidimensionnel - tu contrôles la mise en page dans une seule direction à la fois (ligne OU colonne). Utilise-le pour disposer des éléments en ligne :

1/* Flexbox : idéal pour la navigation */
2.navbar {
3  display: flex;
4  justify-content: space-between;
5  align-items: center;
6  padding: 1rem 2rem;
7}
8
9/* Flexbox : idéal pour le centrage */
10.hero-section {
11  display: flex;
12  flex-direction: column;
13  justify-content: center;
14  align-items: center;
15  min-height: 400px;
16}

Quand choisir Flexbox :

• Barres de navigation et barres d'outils - éléments sur une seule ligne
• Centrage des éléments - rapide et simple avec flex
• Contenu dynamique - les éléments s'adaptent au contenu
• Petits composants - boutons, cartes, formulaires
• Quand tu ne connais pas le nombre d'éléments à l'avance

Comparaison pratique

Voyons le même problème résolu des deux façons :

Exemple 1 : trois cartes côte à côte

1/* Flexbox - les cartes s'adaptent au contenu */
2.cards-flex {
3  display: flex;
4  gap: 20px;
5  flex-wrap: wrap;
6}
7
8.card-flex {
9  flex: 1 1 300px;  /* Grandit, rétrécit, min 300px */
10}
11
12/* Grid - les cartes ont des tailles égales */
13.cards-grid {
14  display: grid;
15  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
16  gap: 20px;
17}

La différence ? Avec Flexbox, les cartes peuvent avoir des tailles différentes si le contenu varie. Avec Grid, chaque carte a exactement la même taille. Si tu veux une grille régulière - choisis Grid. Si tu veux de la flexibilité - Flexbox.

Exemple 2 : la navigation

1/* Flexbox - le choix naturel pour la nav */
2.nav {
3  display: flex;
4  gap: 1rem;
5  align-items: center;
6}
7
8.nav-logo { margin-right: auto; }  /* Logo à gauche, le reste à droite */

Pour la navigation, Flexbox est clairement le meilleur choix - les éléments sont sur une seule ligne et tu peux facilement contrôler leur répartition.

Combiner Grid + Flexbox

Tu obtiendras les meilleurs résultats en combinant les deux systèmes ! Grid pour la mise en page principale, Flexbox pour les composants internes :

1/* Grid : structure principale de la page */
2.page {
3  display: grid;
4  grid-template-areas:
5    "header"
6    "main"
7    "footer";
8  grid-template-rows: auto 1fr auto;
9  min-height: 100vh;
10}
11
12/* Flexbox : navigation dans le header */
13.header {
14  grid-area: header;
15  display: flex;
16  justify-content: space-between;
17  align-items: center;
18  padding: 1rem 2rem;
19}
20
21/* Grid : grille de cartes dans main */
22.main {
23  grid-area: main;
24  display: grid;
25  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
26  gap: 1.5rem;
27  padding: 2rem;
28}
29
30/* Flexbox : contenu d'une seule carte */
31.card {
32  display: flex;
33  flex-direction: column;
34}
35
36.card-body {
37  flex: 1;  /* Remplit l'espace disponible */
38}
39
40.card-footer {
41  display: flex;
42  justify-content: space-between;
43  align-items: center;
44}
45
46/* Flexbox : footer */
47.footer {
48  grid-area: footer;
49  display: flex;
50  justify-content: center;
51  gap: 2rem;
52  padding: 1rem;
53}

Chemin de décision rapide

Réfléchis à ta tâche :

1. Mettre en page une page entière ? -> Grid (grid-template-areas)
2. Créer une grille de cartes/galerie ? -> Grid (repeat + auto-fit)
3. Disposer des éléments sur une seule ligne ? -> Flexbox
4. Centrer un élément ? -> Flexbox (ou Grid avec place-items)
5. Besoin de contrôle sur 2 axes ? -> Grid
6. Les éléments ont des tailles différentes et un contenu dynamique ? -> Flexbox
7. Les éléments doivent avoir des tailles égales dans une grille ? -> Grid

C'est comme choisir les outils dans l'atelier d'un architecte de pyramides - un burin pour les détails (Flexbox), un levier pour les gros blocs (Grid). Ensemble, ils créent des structures monumentales !

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Mise en page Grid responsive</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Galerie responsive d'artefacts</h1>
11    <div class="gallery">
12        <div class="item featured">Masque de Toutânkhamon</div>
13        <div class="item">Pierre de Rosette</div>
14        <div class="item">Papyrus Ebers</div>
15        <div class="item">Grand Sphinx de Gizeh</div>
16        <div class="item">Obélisque de Cléopâtre</div>
17        <div class="item">Scarabée</div>
18        <div class="item">Vase canope</div>
19        <div class="item">Amulette Ânkh</div>
20    </div>
21    <!-- Task: -->
22    <!-- 1. Utilise repeat(auto-fit, minmax(200px, 1fr)) -->
23    <!-- 2. .featured : grid-column: span 2 -->
24    <!-- 3. Ajoute @media (max-width: 500px) pour que featured ne s'étende plus -->
25</body>
26</html>