Flexbox vs Grid
Flexbox aligne les éléments sur un axe et s’adapte à leur contenu, alors que Grid organise une grille à deux dimensions, en lignes et colonnes, où vous les placez.
Comparaison point par point
#Nombre de dimensions
Point de départ
Placement des éléments
Espacement entre les éléments
Alignement sur les deux axes à la fois
Utilisation typique
Exemple
#.flex-row {
display: flex;
gap: 8px;
}
.grid-area {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}<p style="margin: 0 0 6px; color: #a1a1aa;">Flexbox : une ligne</p>
<div class="flex-row stage">
<div class="box">1</div><div class="box">2</div><div class="box">3</div>
</div>
<p style="margin: 10px 0 6px; color: #a1a1aa;">Grid : grille à 3 colonnes</p>
<div class="grid-area stage">
<div class="box">1</div><div class="box">2</div><div class="box">3</div>
<div class="box">4</div><div class="box">5</div><div class="box">6</div>
</div>Définition et utilisation
#Ces deux technologies ont remplacé les anciennes astuces avec float et les tableaux, mais elles résolvent un problème différent. Flexbox travaille sur un seul axe, une ligne ou une colonne, et répartit les éléments selon leur taille naturelle. Grid pense tout de suite en deux dimensions : vous dessinez d’abord une grille de lignes et de colonnes, puis vous y placez les éléments, même de façon à ce qu’ils se chevauchent.
En pratique, Flexbox fonctionne bien quand le nombre d’éléments est inconnu et qu’ils doivent s’enchaîner les uns après les autres : un menu, une liste d’étiquettes, une ligne de boutons. Grid l’emporte quand vous connaissez la mise en page à l’avance : toute une page avec en-tête, panneau latéral et contenu, ou une grille de cartes aux colonnes et lignes régulières.
Rien n’empêche d’utiliser les deux en même temps. Un schéma fréquent consiste à utiliser Grid pour toute la page et Flexbox à l’intérieur d’une seule carte, là où ne compte qu’une ligne avec une icône et du texte.
Syntaxe
#.flex { display: flex; flex-direction: row | column; }
.grid { display: grid; grid-template-columns: ...; grid-template-rows: ...; }Plus d’exemples
#.toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
}<div class="toolbar stage" style="width: 220px;">
<span class="box">HTML</span><span class="box">CSS</span><span class="box">JavaScript</span>
<span class="box">TypeScript</span><span class="box">Python</span>
</div>Réduisez la largeur de l’aperçu : les éléments passent seuls à la ligne suivante. Avec Grid, il faudrait définir combien de colonnes la grille doit contenir.
.layout {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-areas:
"header header"
"menu content";
gap: 8px;
}
.layout header { grid-area: header; }
.layout nav { grid-area: menu; }
.layout main { grid-area: content; }<div class="layout stage">
<header class="box" style="grid-area: header">CodeWorlds</header>
<nav class="box" style="grid-area: menu">Menu</nav>
<main class="box" style="grid-area: content">Leçon 6 : Flexbox vs Grid</main>
</div>Une telle mise en page à deux dimensions (en-tête pleine largeur, panneau latéral et contenu) demanderait, avec Flexbox, d’imbriquer plusieurs conteneurs.
Bonnes pratiques
#- Posez-vous la question : est-ce que je mets en page une seule ligne d’éléments, ou toute une grille à deux dimensions ? La réponse indique le bon outil.
- Un Grid à une seule colonne (
grid-template-columns: 1fr) fonctionne presque comme un Flexbox en colonne. Dans les cas simples, la différence est cosmétique. - Combinez les deux technologies : Grid pour la mise en page de la page, Flexbox à l’intérieur d’un composant.
Entrées associées
#- flexRaccourci qui règle flex-grow, flex-shrink et flex-basis d’un élément.
- grid-template-columnsDéfinit les colonnes de la grille : leur nombre et leur largeur.
- displayDétermine comment un élément se comporte dans la mise en page de la page et comment il organise ses enfants.
- gapDéfinit l’espace entre les éléments d’un conteneur flex, grid ou multi-colonnes.
- place-itemsRaccourci qui règle align-items et justify-items en même temps.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.