Grid ou Flexbox : comment choisir la bonne mise en page CSS

Quand j'ai commencé le dev il y a trois ans, j'ai eu la chance de débarquer à une époque où Flexbox et CSS Grid étaient déjà installés dans le paysage. J'ai esquivé les histoires d'anciens qui me racontaient leurs cauchemars avec les propriétés float détournées ou les tableaux pour structurer une simple page.

Pourtant, même en commençant directement avec ces outils modernes, j'ai vite compris un truc : c'est super facile de s'emmêler les pinceaux.

Au début, je faisais tout à l'instinct. Je balançais du Flexbox absolument partout. Et dès que je devais concevoir une grille de cartes d'articles ou un tableau de bord, je me retrouvais à imbriquer des conteneurs dans tous les sens, à bidouiller des hauteurs fixes ou à rajouter des marges bizarres pour forcer l'alignement. Mon code CSS devenait rapidement une usine à gaz indémêlable.

Si tu galères aujourd'hui à choisir entre Flexbox et Grid pour tes maquettes, rassure-toi : c'est un grand classique du débutant. Pas besoin de paniquer ni de retenir des dizaines de propriétés par cœur.

On va poser les choses à plat et voir comment choisir le bon outil en deux secondes, de manière ultra-visuelle.

---

Flexbox : aligner des éléments sur un seul axe

Pour comprendre Flexbox, oublie un instant le code. Imagine simplement que tu ranges des livres sur une étagère. Tu les poses les uns après les autres sur une seule ligne. Si tu n'as plus de place, tu peux décider de les faire passer sur une étagère en dessous, mais la logique reste la même : tu les alignes le long d'un seul axe.

C'est exactement le rôle de Flexbox. Il gère la mise en page à une seule dimension. Soit horizontalement (en ligne), soit verticalement (en colonne).

Les deux axes invisibles

Dès que tu déclares display: flex sur un conteneur, le navigateur trace deux axes dans sa tête :

1. L'axe principal : par défaut, c'est l'horizontale (de gauche à droite). C'est là que tes éléments vont se ranger par défaut.
2. L'axe transversal : c'est la verticale (perpendiculaire à l'autre).

Si tu passes en flex-direction: column, c'est magique : les axes s'inversent. Ton axe principal devient vertical. Toutes les propriétés d'alignement que tu appliques ensuite se basent sur ces axes dynamiques, pas sur les bords fixes de ton écran. C'est ça qui rend Flexbox si souple.

Les commandes pour positionner tes blocs

Une fois ton conteneur flex activé, tu as trois outils principaux pour organiser tes éléments :

• justify-content : tu l'utilises pour dire aux éléments comment se répartir sur l'axe principal. Tu peux les coller au début, les envoyer au fond, les centrer au milieu, ou laisser le navigateur calculer tout seul un espace égal entre chaque bloc (space-between ou space-around).
• align-items : cette commande sert à gérer l'alignement sur l'axe perpendiculaire. C'est elle qui te permet, en une seule ligne (align-items: center), de résoudre le problème historique du centrage vertical de tes textes ou icônes.
• flex-wrap : par défaut, Flexbox essaie de forcer tous tes éléments à rester sur la même ligne, quitte à les écraser ou à les faire déborder du conteneur. En écrivant flex-wrap: wrap, tu lui donnes l'autorisation de passer proprement à la ligne s'il n'y a plus assez de place.

Les réglages individuels pour tes éléments

Parfois, tu veux qu'un élément spécifique se comporte différemment de ses voisins. Tu peux lui donner des instructions directement dans ses propres classes CSS :

• flex-grow : c'est un coefficient. Il indique si l'élément a le droit de s'étirer pour remplir tout le vide restant dans la ligne. Si tu mets flex-grow: 1 sur un champ de saisie et rien sur le bouton à côté, le champ va prendre toute la place disponible et pousser le bouton au bout.
• flex-basis : c'est la taille de départ que tu donnes à ton élément avant que le navigateur ne commence à ajuster l'espace flex. C'est une sorte de taille de référence de base.

Les cas où Flexbox est imbattable

Flexbox est parfait pour tout ce qui concerne l'alignement de composants isolés ou de petites listes d'éléments :

• Une barre de navigation : avec ton logo calé à gauche et tes liens de menu répartis à droite.
• Des boutons d'action : par exemple un bouton "Annuler" et un "Confirmer" centrés ou collés en bas d'une boîte de dialogue.
• Une liste de tags ou de mots-clés : sous un article, qui s'alignent proprement et sautent à la ligne sur mobile sans casser le design.
• Une icône et son texte : pour être sûr que l'icône de calendrier soit parfaitement alignée avec la date de publication.

Si tes blocs doivent juste suivre un fil conducteur (une ligne ou une colonne) et s'adapter au contenu qu'ils contiennent, fonce : Flexbox est ton homme.

---

CSS Grid : structurer l'espace sur deux dimensions

Maintenant, changeons d'ambiance. Imagine que tu crées la mise en page d'une grille de journal, d'une bande dessinée ou d'une interface de tableau de bord. Tu as besoin d'aligner tes éléments sur des colonnes ET sur des lignes en même temps. Tu veux que le titre s'étale sur toute la largeur, que la barre latérale reste fixe à gauche, et que tes widgets s'alignent parfaitement au pixel près sur une structure invisible.

C'est là que CSS Grid intervient. Il gère la mise en page sur deux dimensions en même temps.

Comment fonctionne la grille ?

Avec Grid, tu ne te soucies pas de la taille individuelle des éléments au départ. C'est le conteneur parent qui décide de tout. Tu dessines ton quadrillage à plat avec des lignes et des colonnes, et ensuite tu dis à tes éléments de venir se loger dans les cases de ce quadrillage.

Pour y arriver, tu utilises des notions très simples :

• Les pistes : ce sont tout simplement les colonnes ou les lignes de ta grille.
• Les cellules : ce sont les cases individuelles formées par le quadrillage.
• Les lignes de grille : ce sont les frontières de ton quadrillage, numérotées de 1 à N. Tu t'en sers pour dire à un élément : "Toi, tu démarres à la ligne de colonne 1 et tu t'arrêtes à la ligne de colonne 3".

Les outils magiques de Grid

Pour éviter de devoir sortir la calculatrice pour créer tes grilles responsives, Grid intègre des fonctions ultra-pratiques :

• La fraction fr : c'est une unité de partage d'espace. Si tu définis trois colonnes avec 1fr 1fr 1fr, le navigateur coupe le conteneur en trois parts égales et les distribue. Si tu écris 1fr 2fr, la deuxième colonne prendra automatiquement le double de la première, sans calcul de pourcentages complexes.
• La fonction repeat() : si tu veux 4 colonnes identiques, au lieu d'écrire 1fr 1fr 1fr 1fr, tu écris juste repeat(4, 1fr). Simple, propre.
• Le combo auto-fit et minmax() : c'est l'outil indispensable pour les grilles d'articles de blog. Si tu écris repeat(auto-fit, minmax(250px, 1fr)), tu dis au navigateur : "Affiche autant de colonnes que possible du moment qu'elles font au moins 250px de large. S'il n'y a plus de place, fais passer les colonnes en trop en dessous d'elles-mêmes". Et voilà, ta grille est parfaitement responsive sur mobile et sur écran géant sans avoir à écrire la moindre media query.
• La propriété gap : elle te permet de définir un espace uniforme entre tes colonnes et tes lignes (par exemple gap: 20px) sans avoir à batailler avec des marges extérieures complexes qui dépassent des bords du site.

Les cas où CSS Grid est indispensable

Utilise Grid dès que ton design impose une structure solide et alignée sur deux axes :

• La structure principale du site : pour définir l'emplacement global du header, de ta barre latérale, de ton contenu et du footer.
• Les grilles de cartes d'articles de blog : pour s'assurer que toutes les cartes ont exactement la même taille et s'alignent proprement sur plusieurs lignes.
• Les Bento Grids ou mosaïques : ces structures asymétriques très tendance où certains blocs sont deux fois plus grands ou s'étalent sur plusieurs lignes de façon irrégulière.

---

La règle d'or pour choisir en 2 secondes

Si tu es perdu face à une maquette, pose-toi cette question très simple :

Est-ce que je veux dessiner la structure globale de ma page d'abord (le parent commande la grille), ou est-ce que je veux simplement aligner des éléments individuels les uns par rapport aux autres (les éléments commandent leur placement) ?

• Si tu veux définir une grille globale avec des lignes et colonnes fixes pour y ranger tes blocs : utilise CSS Grid.
• Si tu as une liste de blocs de tailles variables et que tu veux qu'ils se placent de manière fluide les uns après les autres en s'adaptant à l'espace disponible : utilise Flexbox.

---

Comment les faire collaborer (l'approche hybride)

Dans la vraie vie des projets web, on n'oppose jamais Flexbox et Grid. En fait, ils travaillent en équipe. La règle générale pour avoir un code propre est d'utiliser CSS Grid pour la structure macro (les grands blocs de la page) et Flexbox pour la structure micro (les détails dans chaque bloc).

Prenons un cas concret : une liste d'articles de blog avec une barre latérale.

1. Le layout général : Tu utilises CSS Grid pour diviser ta page en deux colonnes asymétriques : une grande zone pour tes articles à gauche (3fr) et une colonne plus étroite pour ta barre latérale à droite (1fr).
2. La liste d'articles : À l'intérieur de la zone de gauche, tu crées à nouveau une grille CSS Grid avec repeat(auto-fit, minmax(280px, 1fr)) pour afficher tes cartes d'articles proprement sur 2 ou 3 colonnes selon la largeur de l'écran. Toutes tes cartes auront ainsi une hauteur identique par défaut.
3. L'intérieur d'une carte : À l'intérieur d'une carte d'article, tu bascules sur Flexbox en mode colonne (flex-direction: column). Cela te permet de pousser le bouton d'action tout en bas de la carte en lui appliquant simplement une marge automatique en haut (margin-top: auto), quel que soit le nombre de lignes du titre au-dessus.
4. Les badges de catégories : Pour aligner le badge de la catégorie de l'article avec sa date de publication sur une même ligne, tu utilises Flexbox en mode ligne (flex-direction: row) avec justify-content: space-between pour les écarter proprement aux deux extrémités de la carte.

En combinant ainsi les deux techniques, tu obtiens un code propre, logique et ultra-robuste.

---

Les 3 erreurs courantes de débutant à éviter

Pour t'éviter de perdre des heures à déboguer des comportements bizarres, garde en tête ces trois pièges fréquents :

1. Trop imbriquer Flexbox (le syndrome de la poupée russe)

Au début, on a tendance à vouloir recréer une grille en imbriquant un conteneur flex horizontal (pour faire une ligne), à l'intérieur duquel on met des conteneurs flex verticaux (pour faire des colonnes), qui contiennent à leur tour d'autres conteneurs flex. C'est la pire façon d'intégrer. Le code devient lourd, illisible et impossible à rendre responsive facilement. Si tu as besoin d'imbriquer plus de deux niveaux de Flexbox uniquement pour placer des blocs, arrête tout : supprime ce code et utilise un unique conteneur CSS Grid.

2. Le piège des marges physiques pour aligner

Si tu te surprends à écrire des règles CSS à base de margin-left: 27px ou margin-top: -12px pour forcer un élément à s'aligner avec son voisin, c'est que tu passes à côté de la puissance de Flexbox et de Grid. Utilise les propriétés d'alignement intégrées (justify-content, align-items) et la propriété gap pour espacer tes blocs. Les marges physiques fixes finissent toujours par casser ton design sur un écran de taille différente, alors que l'alignement flex/grid s'adapte en temps réel.

3. Confondre auto-fit et auto-fill dans ta grille

Ces deux options semblent identiques dans la fonction repeat(), mais leur comportement change lorsque tu as peu de contenu :

• auto-fill : crée autant de colonnes que possible dans l'espace disponible, même si certaines de ces colonnes restent vides à droite.
• auto-fit : crée également les colonnes, mais s'il reste des colonnes vides, il les effondre et étire les colonnes contenant du texte pour occuper tout l'espace restant. Pour une grille de blog ou de boutique en ligne, privilégie toujours auto-fit pour éviter de te retrouver avec un grand trou vide à droite si tu n'as qu'un seul élément à afficher sur la ligne.

---

Un dernier conseil pour coder avec une intelligence artificielle

Si tu utilises un assistant IA (comme Cursor, Antigravity, Claude ou Codex) pour générer ton code CSS, tu as sans doute remarqué qu'il a tendance à te proposer du Flexbox par défaut à toutes les sauces. C'est normal : les modèles de langage ont été entraînés sur des millions de lignes de vieux codes web où Flexbox était la seule solution populaire d'alignement. L'IA a donc un biais historique naturel et a tendance à contourner Grid en rajoutant des marges complexes ou des hauteurs fixes fragiles.

Pour éviter d'accumuler de la dette technique sur tes projets, prends l'habitude de lui imposer l'architecture de ton CSS dans tes prompts :

• "Rédige le HTML et le CSS de cette liste de fonctionnalités. Utilise CSS Grid pour la structure générale à 3 colonnes (avec repeat et auto-fit pour le responsive) et utilise Flexbox à l'intérieur de chaque carte pour aligner l'icône avec le titre."

En guidant ton assistant sur les bons choix technologiques dès le départ, tu obtiendras un code propre, moderne et surtout beaucoup plus simple à maintenir par la suite.

Allez, bon code !

---

👉 Lire le Chapitre 1 : CSS Fondamentaux (Accès libre)