CSS Grid vs Flexbox : lequel choisir ?

Flexbox et Grid sont les deux systèmes de mise en page natifs de CSS. Ils ne sont pas concurrents : ils répondent à deux problèmes différents. Comprendre cette différence vous évite 90% des galères de mise en page.

Le principe fondamental : une dimension vs deux dimensions

Flexbox est unidimensionnel. Il organise des éléments sur un seul axe à la fois : soit en ligne, soit en colonne. Il excelle dès qu'il s'agit d'aligner, de répartir ou de centrer du contenu.

Grid est bidimensionnel. Il contrôle les lignes ET les colonnes simultanément. Il excelle dès qu'il s'agit de construire une structure de page ou une grille de cartes.

Flexbox en pratique

Le code

.flex-container {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
}

La prévisualisation

Remarquez : align-items: center aligne automatiquement les éléments sur l'axe vertical malgré leurs hauteurs différentes. C'est la grande force de Flexbox — l'alignement automatique sans calcul manuel.

Flexbox responsive

.flex-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.flex-item {
	flex: 1 1 200px; /* grandit, rétrécit, base de 200px */
}

flex-wrap: wrap permet aux éléments de passer à la ligne quand l'espace manque — pas besoin de media query pour ce comportement de base.

Réduisez la largeur de votre fenêtre : les blocs ci-dessus passent automatiquement à la ligne dès qu'ils n'ont plus 200px de place chacun.

Grid en pratique

Le code

.grid-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

La prévisualisation

Ici, Grid répartit automatiquement les éléments sur des lignes ET des colonnes en gardant un alignement parfait — exactement ce que Flexbox ne fait pas nativement (avec flex-wrap, les colonnes ne s'alignent pas forcément entre les lignes).

Grid responsive sans aucune media query

.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
}

C'est probablement le pattern Grid le plus utile en production : auto-fit calcule combien de colonnes peuvent tenir, et minmax(180px, 1fr) garantit qu'aucune colonne ne descend sous 180px. Résultat : une grille de cartes parfaitement responsive en 3 lignes de CSS, zéro media query. C'est exactement ce que tu utilises probablement pour .featured-articles__grid sur ton propre portfolio.

Pourquoi choisir Grid plutôt que Flexbox

Grid devient le bon choix dès que vous avez besoin de :

• Une structure de page complète : header, sidebar, contenu, footer, contrôlés en une seule déclaration via grid-template-areas
• Un alignement en deux dimensions : vos cartes doivent s'aligner aussi bien horizontalement que verticalement (un dashboard, une galerie d'images)
• Du chevauchement contrôlé : superposer des éléments à des positions précises (impossible proprement en Flexbox)
• Des grilles de tailles inégales : un élément qui occupe 2 colonnes pendant que ses voisins en occupent 1 (grid-column: span 2)

.page-layout {
	display: grid;
	grid-template-areas:
		"header header"
		"sidebar content"
		"footer footer";
	grid-template-columns: 250px 1fr;
}

.header {
	grid-area: header;
}
.sidebar {
	grid-area: sidebar;
}
.content {
	grid-area: content;
}
.footer {
	grid-area: footer;
}

Pourquoi choisir Flexbox plutôt que Grid

Flexbox reste le bon choix dès que vous avez besoin de :

• Centrer un élément, peu importe sa taille : display: flex; justify-content: center; align-items: center; — toujours la solution la plus rapide
• Une barre de navigation : logo à gauche, liens au centre, bouton à droite — un seul axe, alignement automatique
• Distribuer de l'espace dynamiquement entre des éléments de tailles différentes sans connaître leur nombre à l'avance
• Un groupe de boutons ou de tags qui s'enchaînent naturellement et passent à la ligne (votre .article-card__categories en est un exemple parfait)
• Le contenu interne d'une carte : titre, description, footer empilés verticalement avec flex-direction: column et margin-top: auto pour pousser le footer en bas

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card-footer {
	margin-top: auto; /* pousse vers le bas dans un parent flex-column */
}

Le tableau récapitulatif

Les utiliser ensemble : le vrai pattern de production

En réalité, sur un projet sérieux, vous ne choisissez pas l'un contre l'autre : Grid structure la page, Flexbox structure le contenu de chaque bloc.

/* Grid pour la structure globale */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}

/* Flexbox pour l'intérieur de chaque carte */
.card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.card-footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

C'est exactement l'architecture de .featured-articles__grid (Grid) combinée à .article-card__body (Flexbox, avec margin-top: auto sur le footer) que tu utilises déjà sur ton propre portfolio.

En résumé

• Besoin d'aligner des éléments sur un axe → Flexbox
• Besoin de structurer toute une zone en lignes et colonnes → Grid
• Dans le doute, posez-vous la question : "Est-ce que je raisonne en une ligne, ou en grille complète ?" La réponse vous donne le bon outil.
• En pratique, les deux cohabitent en permanence dans une même interface, à des niveaux différents.