Flexbox ou Grid ? La question revient dans tous les projets web, et la réponse est presque toujours : « les deux, chacun à sa place ». Les deux modules de mise en page de CSS résolvent des problèmes différents. Flexbox organise des éléments le long d'une direction ; Grid place des éléments dans un tableau de lignes et de colonnes. Ce guide donne un critère de choix simple, les mécanismes essentiels de chacun et cinq recettes prêtes à l'emploi.
Expérimentez en direct avec le générateur Flexbox et Grid, qui produit le code CSS de ce que vous dessinez, puis habillez vos blocs avec les arrondis et les ombres.
Le critère de choix : une dimension ou deux
| Critère | Flexbox | Grid |
|---|---|---|
| Dimensions | Une : ligne ou colonne. | Deux : lignes et colonnes. |
| Point de départ | Le contenu des éléments. | La structure de la grille. |
| Alignement entre lignes | Indépendant d'une ligne à l'autre. | Colonnes et rangées partagées par toute la grille. |
| Usages typiques | Barre de navigation, boutons, centrage, étiquettes, pied de carte. | Structure de page, galerie, grille de cartes, formulaires alignés. |
La règle pratique : alignez-vous sur une ligne ? Flexbox. Placez-vous dans un tableau ? Grid. Une page type utilise Grid pour sa structure générale (en-tête, contenu, colonne latérale, pied de page) et Flexbox à l'intérieur de chaque zone.
Flexbox : deux axes à retenir
Tout repose sur l'axe principal (défini par flex-direction : horizontal pour row, vertical pour column) et l'axe transversal, perpendiculaire. Les propriétés d'alignement suivent ces axes, pas « horizontal/vertical » :
justify-contentrépartit les éléments sur l'axe principal (début, centre, fin, espacement).align-itemsles aligne sur l'axe transversal.flex-wrap: wrapautorise le retour à la ligne ;gapespace les éléments.- Sur un élément,
flex: 1lui fait partager l'espace restant ;flex: nonefige sa taille ;margin-left: autopousse un élément à l'autre extrémité.
Quand flex-direction: column est utilisé, les rôles s'inversent : justify-content agit alors verticalement. C'est la source de la plupart des confusions.
Grid : décrire la grille, puis placer
- Pistes :
grid-template-columns: 200px 1fr 2frcrée une colonne fixe puis deux colonnes qui se partagent le reste dans un rapport de 1 à 2. L'unitéfrest une fraction de l'espace libre. - Grille réactive sans media query :
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))place autant de colonnes d'au moins 220 px que la largeur le permet. - Zones nommées :
grid-template-areasdessine la page avec des noms, puisgrid-area: mainplace un élément dans la zone « main ». Les zones doivent être rectangulaires. - Étendue :
grid-column: span 2fait occuper deux colonnes à un élément. - Alignement :
justify-itemsetalign-itemsrèglent les éléments dans leur cellule ;place-items: centerles centre dans les deux directions.
Cinq recettes à connaître
1. Centrer un élément (horizontal et vertical)
.centre { display: grid; place-items: center; min-height: 100vh; }2. Barre de navigation : logo à gauche, liens à droite
.nav { display: flex; align-items: center; gap: 1rem; }
.nav .logo { margin-right: auto; }3. Grille de cartes réactive
.cartes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }4. Pied de page collé en bas
body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }5. Carte dont le bouton reste en bas
.carte { display: flex; flex-direction: column; }
.carte .actions { margin-top: auto; }Combiner les deux, et éviter les pièges
- Grid dehors, Flexbox dedans : une carte dans une grille peut elle-même être un conteneur flex pour aligner son contenu.
- Le piège du
min-width. Un élément flex ou grid refuse de rétrécir en dessous de la largeur de son contenu : un long mot ou une image large débordent. Ajoutezmin-width: 0sur l'enfant (etoverflow-wrap: anywherepour le texte). - Ordre visuel et accessibilité.
orderet le placement en grille changent l'ordre d'affichage, pas l'ordre de tabulation ni de lecture : gardez l'ordre du HTML logique. - Ne forcez pas des hauteurs en pixels. Laissez le contenu décider, avec
min-heightplutôt queheight. - Utilisez
gapplutôt que des marges sur chaque élément : plus simple et sans marge parasite aux extrémités. - Testez à plusieurs largeurs, du téléphone au grand écran, et avec un texte agrandi.
Questions fréquentes
Flexbox ou Grid : lequel est le meilleur ?
Aucun : ils sont complémentaires. Flexbox organise des éléments dans une seule direction (barre de navigation, boutons), Grid place des éléments en lignes et en colonnes (structure de page, galeries). On utilise souvent Grid pour la page et Flexbox à l'intérieur des zones.
Comment centrer un élément en CSS ?
Avec Grid : display: grid; place-items: center sur le conteneur. Avec Flexbox : display: flex; justify-content: center; align-items: center. Le conteneur doit avoir une hauteur (par exemple min-height: 100vh) pour centrer verticalement.
Quelle est la différence entre justify-content et align-items ?
En Flexbox, justify-content répartit les éléments sur l'axe principal et align-items les aligne sur l'axe transversal. Avec flex-direction: column, les axes sont inversés.
À quoi sert l'unité fr ?
Elle représente une fraction de l'espace disponible dans une grille : 1fr 2fr donne deux colonnes qui se partagent l'espace dans un rapport de 1 à 2, une fois les tailles fixes retirées.
Comment faire une grille réactive sans media query ?
Avec grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) : le navigateur place autant de colonnes d'au moins 240 px que la largeur le permet et les étire pour occuper la place.