CSS Grid vs Flexbox : quand utiliser l'un ou l'autre

Introduction

Pendant des annees, les developpeurs web ont utilise des hacks pour creer des mises en page : float, display: table, position: absolute, frameworks de grilles comme Bootstrap. Depuis 2017, deux modules CSS natifs ont tout change : Flexbox et CSS Grid.

Les deux sont aujourd'hui supportes par tous les navigateurs modernes (plus de 98 % de couverture mondiale selon Can I Use). Mais ils ont des forces differentes, et les utiliser a bon escient est la cle d'un CSS propre et maintenable.

Flexbox : la mise en page unidimensionnelle

Le concept

Flexbox (Flexible Box Layout) organise les elements sur un seul axe : horizontal (en ligne) ou vertical (en colonne). C'est ideal pour :

• Aligner des elements dans une barre de navigation
• Centrer un element verticalement et horizontalement
• Distribuer l'espace entre des elements de taille variable

Les proprietes essentielles

.container {
  display: flex;
  flex-direction: row;        /* ou column */
  justify-content: center;    /* axe principal */
  align-items: center;        /* axe perpendiculaire */
  gap: 16px;                  /* espacement entre elements */
  flex-wrap: wrap;            /* retour a la ligne si necessaire */
}

.item {
  flex: 1;                    /* prend l'espace disponible */
  flex-shrink: 0;             /* ne retrecit pas */
  flex-basis: 200px;          /* taille de depart */
}

Exemples d'utilisation

Centrer un element (le Saint Graal du CSS) :

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Barre de navigation :

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

Liste de cartes adaptative :

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px;  /* minimum 300px, grandissent uniformement */
}

CSS Grid : la mise en page bidimensionnelle

Le concept

CSS Grid organise les elements sur deux axes simultanement : lignes et colonnes. C'est ideal pour :

• Les mises en page de pages entieres
• Les grilles de cartes avec des tailles variees
• Les layouts asymetriques (type magazine)

Les proprietes essentielles

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);     /* 3 colonnes egales */
  grid-template-rows: auto;
  gap: 24px;
}

/* Un element qui occupe 2 colonnes */
.grid-item-large {
  grid-column: span 2;
}

/* Un element qui occupe 2 lignes */
.grid-item-tall {
  grid-row: span 2;
}

Le pouvoir de `grid-template-areas`

Grid permet de nommer les zones de votre mise en page, rendant le CSS incroyablement lisible :

.page-layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  grid-template-columns: 250px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

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

/* Responsive : tout empile sur mobile */
@media (max-width: 768px) {
  .page-layout {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

La grille responsive sans media queries

La combinaison auto-fill + minmax cree une grille qui s'adapte automatiquement :

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

Cette seule ligne cree une grille ou chaque colonne fait au minimum 280 px et se redimensionne fluidement. Pas besoin de media queries.

Quand utiliser Flexbox vs Grid

Utilisez Flexbox quand :

• Vous alignez des elements sur un seul axe (ligne ou colonne)
• Vous avez besoin de centrer un element
• Les elements ont des tailles variables et doivent partager l'espace
• Vous gerez la navigation, la barre d'outils ou un groupe de boutons
• L'ordre des elements suit le flux naturel

Utilisez Grid quand :

• Vous concevez une mise en page a deux dimensions (lignes ET colonnes)
• Vous avez besoin d'elements qui chevauchent lignes et colonnes
• Vous voulez definir la structure globale d'une page
• Les elements doivent s'aligner sur une grille precise
• Vous creez un layout de type magazine ou dashboard

Combinez les deux

La meilleure approche est souvent de les combiner :

• Grid pour la structure globale de la page (header, sidebar, content, footer)
• Flexbox pour l'agencement a l'interieur de chaque section (navigation, cartes, formulaires)

/* Grid pour la mise en page globale */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
}

/* Flexbox pour la navigation dans le header */
.header nav {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Grid pour la grille de cartes dans le contenu */
.content .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* Flexbox pour le contenu de chaque carte */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Les pieges courants

Flexbox : le retrecissement inattendu

Par defaut, les elements flex retrecissent (flex-shrink: 1). Un texte long dans un conteneur flex peut etre ecrase. Solution : flex-shrink: 0 ou min-width: 0.

Grid : le debordement

Un element grid dont le contenu est plus large que sa cellule peut deborder. Solution : min-width: 0 ou overflow: hidden sur l'element.

L'abus de Grid pour tout

Utiliser Grid la ou Flexbox suffit ajoute de la complexite inutile. Pour centrer un element, Flexbox en 3 lignes est plus simple qu'une grille.

Conclusion

Flexbox et Grid ne sont pas en competition — ils sont complementaires. Flexbox excelle pour les composants lineaires (navigation, listes, alignements). Grid excelle pour les mises en page structurelles (pages, grilles, dashboards). Maitrisez les deux et combinez-les pour un CSS moderne, lisible et maintenable.