CSS Flexbox vs Grid : Quel système de mise en page choisir ?

.navbar {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.navbar .logo { margin-right: auto; }
/* le logo reste à gauche, les liens à droite */

Ce pour quoi CSS Grid est réellement efficace

Grid a été conçu pour des mises en page en deux dimensions — vous définissez à la fois les lignes et les colonnes, et vous pouvez placer les éléments précisément dans des cellules, s'étendre sur plusieurs lignes ou colonnes, et créer des espaces dans les deux directions.

Voici les cas où Grid est le bon choix :

• Mises en page de pages — header, sidebar, contenu principal, footer, tous positionnés relativement les uns par rapport aux autres
• Mises en page de magazines ou de tableaux de bord où différents éléments occupent des quantités d'espace différentes
• Galeries d'images avec une structure de grille cohérente quelle que soit la taille de l'image
• Mises en page de formulaires où les étiquettes et les entrées doivent s'aligner horizontalement et verticalement
• Toute mise en page où vous pensez aux lignes ET aux colonnes en même temps

.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    min-height: 100dvh;
}

Exemple côte à côte : Une grille de cartes

C'est ici que la confusion survient. Les deux systèmes peuvent créer une ligne de cartes :

.card-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.card { flex: 1 1 280px; }

.card-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

Les deux fonctionnent. La version Grid est généralement préférée ici car auto-fill avec minmax offre un comportement de colonne plus prévisible — chaque colonne a exactement la même largeur, et la grille se réorganise proprement. La version Flexbox est meilleure lorsque les cartes peuvent avoir des largeurs variables et que vous voulez qu'elles utilisent l'espace disponible de manière plus fluide.

La différence d'alignement

Dans Flexbox, vous alignez les éléments le long de l'axe principal (la direction choisie) et de l'axe transversal (perpendiculaire à celui-ci). Vous ne pouvez pas contrôler indépendamment la position d'une cellule dans une grille invisible de lignes et de colonnes.

Dans Grid, chaque élément vit dans une cellule avec une position de ligne et de colonne. Vous pouvez placer un élément à la ligne 2, colonne 3 explicitement, ou laisser le navigateur le placer automatiquement. Flexbox n'a aucune notion de cellules — les éléments s'écoulent simplement dans la direction spécifiée.

Erreurs courantes

Utiliser Grid pour un centrage simple : display: flex; align-items: center; justify-content: center est plus rapide que de configurer une grille pour un seul élément. Flexbox gagne sur les tâches à axe unique.

Utiliser Flexbox pour des mises en page de pages complètes : Dès que vous avez plus de deux composants qui doivent être liés positionnellement (header + sidebar + contenu + footer), l'absence de deuxième axe chez Flexbox devient un problème. Grid gère cela avec les zones nommées.

Utiliser la colonne Flexbox comme substitut aux lignes Grid : flex-direction: column permet aux éléments de s'empiler verticalement, mais vous perdez la capacité d'aligner du contenu sur plusieurs colonnes simultanément. Si vous pensez en termes de colonnes, passez à Grid.

Utiliser les deux ensemble

Grid et Flexbox ne s'excluent pas mutuellement. Le modèle le plus courant dans le monde réel est Grid pour la mise en page au niveau de la page, Flexbox à l'intérieur de chaque section :

• Grid positionne la sidebar, le header et la zone de contenu principal
• À l'intérieur de la navigation (qui se trouve dans la zone du header), Flexbox gère la ligne logo + liens + bouton CTA
• À l'intérieur de la zone de contenu principal, une grille de cartes utilise Grid pour la structure des colonnes
• À l'intérieur de chaque carte, Flexbox gère la mise en page icône + texte + bouton

Ce modèle de composition — Grid pour la structure, Flexbox pour les composants — est la manière dont la plupart des frameworks CSS modernes (Tailwind, Bootstrap) fonctionnent en interne.

Référence rapide des propriétés