Vous avez appris Flexbox, vous l’utilisez partout, et un jour vous tombez sur une mise en page qui résiste : les colonnes ne s’alignent pas d’une ligne à l’autre, vous ajoutez des marges négatives, vous bricolez. C’est en général le signe qu’il fallait utiliser CSS Grid.
Flexbox et Grid ne sont pas concurrents et l’un ne remplace pas l’autre. Ce sont deux outils conçus pour deux problèmes différents, et savoir lequel choisir fait gagner beaucoup de temps.
La différence fondamentale : une dimension ou deux
Toute la distinction tient dans cette phrase : Flexbox travaille sur un axe à la fois, Grid travaille sur deux axes simultanément.
Avec Flexbox, vous disposez des éléments en ligne ou en colonne. Même quand le contenu passe à la ligne suivante, chaque ligne est calculée indépendamment : les éléments de la deuxième ligne ne connaissent pas la largeur de ceux de la première. C’est exactement ce qui provoque ces alignements approximatifs que l’on essaie ensuite de corriger à la main.
Avec Grid, vous définissez à l’avance une trame de lignes et de colonnes, et les éléments s’y placent. Un élément de la troisième ligne est aligné avec ceux de la première parce qu’ils partagent la même colonne. L’alignement n’est plus une conséquence du contenu : c’est une règle imposée par la grille.
Le contenu ou la mise en page : qui commande ?
Une deuxième manière de trancher, souvent plus parlante que la première : demandez-vous si c’est le contenu qui doit dicter la disposition, ou l’inverse.
- Flexbox part du contenu. Vous avez trois boutons de largeurs différentes et vous voulez qu’ils se répartissent harmonieusement. Vous ne savez pas à l’avance combien de place chacun prendra, et ce n’est pas grave.
- Grid part de la mise en page. Vous savez que la page comporte un en-tête, une barre latérale de 250 pixels, une zone principale et un pied de page. Vous dessinez la structure, puis vous y déposez le contenu.
Tableau de décision rapide
| Situation | Choix conseillé |
|---|---|
| Barre de navigation avec logo et liens | Flexbox |
| Structure globale de la page | Grid |
| Centrer un élément dans un conteneur | Les deux fonctionnent |
| Galerie d’images alignée en lignes et colonnes | Grid |
| Groupe de boutons ou d’étiquettes | Flexbox |
| Contenu interne d’une carte | Flexbox |
| Tableau de bord avec zones de tailles différentes | Grid |
| Formulaire sur deux colonnes alignées | Grid |
Les propriétés essentielles de Flexbox
Sur le conteneur, quatre propriétés couvrent la grande majorité des cas :
display: flexactive le mode.flex-directionchoisit l’axe :rowpar défaut, oucolumn.justify-contentrépartit les éléments le long de l’axe principal.align-itemsles aligne sur l’axe perpendiculaire.
Sur les enfants, la propriété raccourcie flex combine trois comportements : la capacité à grandir, la capacité à rétrécir et la taille de base. Écrire flex: 1 sur plusieurs enfants leur fait partager l’espace disponible à parts égales — c’est le réflexe le plus utile à retenir.
Les propriétés essentielles de Grid
Côté Grid, la logique commence par la définition de la trame :
display: gridactive le mode.grid-template-columnsdéclare les colonnes. L’unitéfrreprésente une fraction de l’espace libre :1fr 2frcrée deux colonnes dont la seconde est deux fois plus large.gapdéfinit l’espacement entre les cellules, sans marges négatives ni calculs.grid-template-areaspermet de nommer les zones et de dessiner la mise en page presque littéralement dans le CSS.
Une combinaison mérite d’être connue par cœur : repeat(auto-fill, minmax(250px, 1fr)). Elle crée autant de colonnes d’au moins 250 pixels que la largeur disponible le permet, et les fait s’étirer pour occuper l’espace. C’est une galerie responsive complète sans une seule media query.
Les combiner, plutôt que choisir
Dans un projet réel, les deux cohabitent en permanence, à des niveaux différents de l’arborescence. Le schéma le plus courant est le suivant :
- Grid pour la structure de la page : en-tête, barre latérale, contenu principal, pied de page.
- Grid pour les collections : la grille de cartes, la galerie, la liste de produits.
- Flexbox à l’intérieur de chaque carte : image, titre, texte et bouton empilés, avec le bouton poussé en bas.
- Flexbox pour les petits groupes : la barre de navigation, les icônes, les étiquettes.
Un élément peut d’ailleurs être à la fois enfant d’une grille et conteneur flex pour ses propres enfants. Il n’y a aucun conflit : chaque contexte de mise en page ne concerne que la relation directe entre un parent et ses enfants.
Erreurs fréquentes
- Forcer Flexbox sur une vraie grille. Si vous vous surprenez à calculer des largeurs en pourcentage moins la moitié d’un espacement, passez à Grid.
- Utiliser Grid pour aligner deux éléments. Pour une barre de navigation simple, Flexbox est plus court et plus lisible.
- Oublier que
gapfonctionne aussi en Flexbox. Les marges sur les enfants ne sont plus nécessaires dans la plupart des cas. - Multiplier les media queries. Beaucoup d’adaptations responsive s’obtiennent avec
minmax,auto-fitouflex-wrap, sans point de rupture.
Conclusion
La règle tient en une ligne : une seule direction et un contenu de taille imprévisible, c’est Flexbox ; deux directions et une structure décidée à l’avance, c’est Grid. Dès que cette distinction devient un réflexe, la plupart des mises en page cessent d’être un combat.
Pour pratiquer ces notions avec des exercices progressifs, vous pouvez explorer les cours gratuits de programmation web disponibles sur Cursa, qui abordent HTML, CSS et la mise en page responsive pas à pas.
