Cette question revient à chaque nouveau projet : faut-il Flexbox ou CSS Grid pour telle mise en page ? La réponse tient en une phrase, mais elle demande d'abord de comprendre ce qui différencie vraiment les deux outils, au-delà de la syntaxe.
Grid et Flexbox ne sont pas deux façons concurrentes de faire la même chose. Ils répondent à deux problèmes différents, et la plupart des interfaces réelles utilisent les deux à la fois, chacun là où il est le plus adapté.
Définition
La différence centrale tient en un mot : la dimension. Flexbox aligne des éléments sur un seul axe à la fois, en ligne ou en colonne selon flex-direction, et s'adapte au contenu. Grid aligne des éléments sur deux axes en même temps, lignes et colonnes ensemble, dans une structure généralement définie à l'avance. Ce n'est pas une différence de puissance, l'un n'étant pas simplement une version plus avancée de l'autre, mais une différence de nature du problème résolu.
Comparaison directe
| Critère | Flexbox | Grid |
|---|---|---|
| Dimension | Un seul axe à la fois | Deux axes en même temps |
| Origine des tailles | Dictées surtout par le contenu | Souvent définies à l'avance par le conteneur |
| Cas typique | Barre de navigation, liste de boutons | Squelette de page, grille de cartes |
| Comportement au débordement | Les éléments s'enroulent avec flex-wrap | De nouvelles pistes se créent automatiquement |
Un exemple qui parle : une carte de produit
.carte {
display: grid;
grid-template-columns: 96px 1fr;
gap: 12px;
}
.carte-actions {
display: flex;
justify-content: space-between;
align-items: center;
}Ici, Grid organise la structure générale de la carte, une image à gauche et un texte à droite. À l'intérieur de cette carte, une rangée de boutons d'action utilise Flexbox, parce qu'aligner des boutons sur une seule ligne, avec de l'espace réparti entre eux, est exactement le problème que Flexbox résout le mieux. C'est cette imbrication, Grid pour la structure et Flexbox pour les composants qu'elle contient, qui revient le plus souvent dans les interfaces réelles. Notre formation HTML et CSS entraîne justement ce réflexe d'imbrication sur des interfaces réelles, pour ne plus hésiter entre les deux systèmes au moment de coder une mise en page.
Un repère simple pour choisir
Face à une nouvelle mise en page, une question suffit généralement à trancher : est-ce que je pense en une seule rangée ou colonne, ou est-ce que je pense vraiment en lignes ET en colonnes à la fois ? Dans le premier cas, Flexbox. Dans le second, Grid.
Le cas particulier de flex-wrap
flex-wrap peut donner l'impression que Flexbox gère aussi deux dimensions, puisque les éléments passent à la ligne suivante quand ils ne tiennent plus sur une seule. Mais chaque ligne créée par flex-wrap reste indépendante des autres : rien n'aligne automatiquement les éléments d'une ligne avec ceux de la ligne suivante, contrairement à une vraie grille où toutes les lignes partagent les mêmes colonnes. C'est cette absence d'alignement entre les lignes qui distingue un Flexbox avec retour à la ligne d'une grille à deux dimensions.
Ce que les deux ont en commun
Grid et Flexbox partagent en réalité une bonne partie de leur vocabulaire d'alignement : justify-content, align-items et gap fonctionnent presque à l'identique dans les deux systèmes. Une fois l'un des deux maîtrisé, l'autre demande surtout d'apprendre les propriétés propres à la dimension supplémentaire de Grid, plutôt que de repartir de zéro.
Questions fréquentes
Oui, c'est même la pratique la plus courante. Un conteneur peut porter display: grid pour sa structure générale, tandis que l'un de ses enfants porte display: flex pour organiser son propre contenu. Les deux systèmes n'entrent jamais en conflit, chacun ne s'applique qu'à son propre conteneur.
Non, les deux sont des systèmes natifs optimisés par le navigateur, sans différence de performance perceptible dans un usage normal. Le choix entre les deux doit se faire sur la nature du problème de mise en page, jamais sur une supposée différence de rapidité.
Flexbox se prête généralement mieux à un premier apprentissage, parce qu'un seul axe à gérer réduit le nombre de concepts à assimiler d'un coup. Grid devient ensuite plus naturel une fois ce vocabulaire d'alignement déjà acquis, puisqu'il en réutilise une grande partie.