Guide complet : Les Flexbox et Grid combinés efficacement

Flexbox vs Grid : quand utiliser quoi

Flexbox et CSS Grid ne sont pas en compétition — ils sont complémentaires. La règle simple :

• Flexbox = alignement sur un axe (horizontal OU vertical). Idéal pour : barres de navigation, groupes de boutons, centrage, distribution d’éléments dans un conteneur
• CSS Grid = placement sur deux axes (lignes ET colonnes). Idéal pour : mises en page complètes, grilles de cartes, layouts complexes avec des zones nommées

En pratique, vous utilisez Grid pour la structure générale de la page et Flexbox pour l’alignement à l’intérieur de chaque section.

Rappel Flexbox : les propriétés essentielles

/* Conteneur flex */
.container {
  display: flex;
  justify-content: space-between;  /* Axe principal (horizontal par défaut) */
  align-items: center;             /* Axe secondaire (vertical) */
  gap: 16px;                       /* Espace entre les éléments */
  flex-wrap: wrap;                 /* Retour à la ligne si pas de place */
}

/* Enfants flex */
.item {
  flex: 1;                         /* Prend une part égale de l'espace */
  flex: 0 0 200px;                 /* Taille fixe de 200px, ne grandit/rétrécit pas */
  flex: 1 1 300px;                 /* Part égale, min 300px, peut rétrécir */
}

Rappel Grid : les propriétés essentielles

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 colonnes égales */
  grid-template-columns: 250px 1fr 300px; /* Sidebar - contenu - aside */
  gap: 20px;
}

/* Responsive automatique sans media query */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

repeat(auto-fit, minmax(280px, 1fr)) crée autant de colonnes que possible avec un minimum de 280px chacune. La grille passe automatiquement de 3 colonnes sur desktop à 1 colonne sur mobile.

Exemple 1 : Layout de page complet

<div class="page-layout">
  <header class="header">Logo et navigation</header>
  <aside class="sidebar">Menu latéral</aside>
  <main class="content">Contenu principal</main>
  <aside class="widgets">Widgets</aside>
  <footer class="footer">Pied de page</footer>
</div>

/* Grid pour la structure de page */
.page-layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content widgets"
    "footer  footer  footer";
  grid-template-columns: 250px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 0;
}

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

/* Flexbox pour la navigation DANS le header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

/* Responsive : passer à une colonne */
@media (max-width: 768px) {
  .page-layout {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "widgets"
      "footer";
    grid-template-columns: 1fr;
  }
}

Exemple 2 : Carte produit (Grid + Flexbox)

.products-grid {
  /* Grid pour disposer les cartes */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.product-card {
  /* Flexbox pour organiser l'intérieur de la carte */
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
}

.product-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.product-info {
  padding: 16px;
  flex: 1;  /* Prend l'espace restant */
  display: flex;
  flex-direction: column;
}

.product-info h3 { margin-bottom: 8px; }
.product-info p { flex: 1; color: #666; }  /* Pousse le prix vers le bas */

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.product-price { font-size: 1.3rem; font-weight: bold; color: #e94560; }
.product-btn {
  padding: 8px 16px;
  background: #4a90d9;
  color: white;
  border: none;
  border-radius: 6px;
}

L’astuce clé : flex: 1 sur la description pousse le prix et le bouton vers le bas de la carte. Toutes les cartes ont le même alignement vertical, quelle que soit la longueur de la description.

Exemple 3 : Barre de navigation responsive

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #1a1a2e;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.nav-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

@media (max-width: 768px) {
  .navbar { flex-wrap: wrap; }
  .nav-links {
    order: 3;           /* Passer en dessous */
    width: 100%;        /* Prendre toute la largeur */
    flex-direction: column;
    gap: 8px;
  }
}

Aide-mémoire rapide

Exercice

Construisez un tableau de bord avec :

1. Un header avec logo + navigation (Flexbox)
2. Une sidebar à gauche avec des liens (Flexbox vertical)
3. Un contenu principal avec une grille de 4 cartes statistiques (Grid)
4. Un graphique pleine largeur en dessous des cartes
5. Le tout responsive : sidebar qui passe en haut sur mobile