CSS Grid vs Flexbox : quand utiliser quoi ?

Dans le monde du développement web moderne, deux systèmes de mise en page CSS se distinguent particulièrement : CSS Grid et Flexbox. Bien que ces deux outils soient puissants et complémentaires, ils répondent à des besoins différents et excellent dans des contextes spécifiques. Comprendre quand utiliser l'un ou l'autre est essentiel pour créer des interfaces web robustes et maintenables.

Comprendre les fondamentaux

Avant de plonger dans les cas d'usage spécifiques, il est crucial de comprendre les concepts de base qui différencient ces deux systèmes.

Flexbox en bref

Flexbox (Flexible Box Layout) est un modèle de mise en page unidimensionnel, conçu pour organiser les éléments soit en ligne, soit en colonne. Il excelle dans la distribution de l'espace au sein d'un conteneur, même lorsque les dimensions des éléments sont inconnues ou dynamiques.

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

.item {
  flex: 1;
  margin: 10px;
}

CSS Grid en bref

CSS Grid est un système bidimensionnel qui permet de gérer simultanément les lignes et les colonnes. Il est particulièrement adapté pour créer des layouts complexes et structurés.

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

.item {
  grid-column: span 2;
}

Cas d'usage optimaux

Quand utiliser Flexbox

• Navigation bars : Parfait pour aligner horizontalement des éléments avec espacement flexible
• Cards alignement : Idéal pour des lignes ou colonnes de composants similaires
• Centrage vertical et horizontal : Solution simple pour le centrage parfait

/ Exemple de navbar avec Flexbox /
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-links {
  display: flex;
  gap: 1rem;
}

/ Exemple de dashboard layout avec Grid /
.dashboard {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 20px;
}

/ Avec Grid /
.holy-grail {
  display: grid;
  grid-template: 
    "header header header" auto
    "nav main aside" 1fr
    "footer footer footer" auto
    / auto 1fr auto;
}

/ Avec Flexbox /
.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  display: flex;
  flex: 1;
}

// Test avec Jest et Testing Library
describe('Layout Components', () => {
  test('Grid Layout renders correctly', () => {
    const { container } = render();
    expect(container.firstChild).toHaveStyle({
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)'
    });
  });
});

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

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}