Sommaire

Comprendre les fondamentaux

Avant de pouvoir choisir efficacement entre Flexbox et Grid, il est essentiel de comprendre leur philosophie respective et leurs mécanismes de base.

Flexbox : la mise en page unidimensionnelle

Flexbox a été conçu pour distribuer l'espace et aligner du contenu le long d'un axe unique. C'est cette nature unidimensionnelle qui constitue son ADN.

Principe de fonctionnement

Flexbox fonctionne selon deux axes perpendiculaires : l'axe principal (main axis) et l'axe secondaire (cross axis). Lorsque vous définissez display: flex sur un élément, celui-ci devient un flex container et ses enfants directs deviennent des flex items. La direction de l'axe principal est déterminée par la propriété flex-direction qui peut être row (horizontal, par défaut) ou column (vertical).

L'axe secondaire est toujours perpendiculaire à l'axe principal. Cette distinction est fondamentale : Flexbox vous permet de contrôler finement la disposition sur l'axe principal, tandis que l'axe secondaire sert principalement à l'alignement.

Concepts clés

Les propriétés essentielles de Flexbox s'articulent autour de quelques concepts :

Flex container : l'élément parent qui définit le contexte flexible
Flex items : les enfants directs du container
Direction : flex-direction définit l'orientation de l'axe principal
Wrap : flex-wrap permet aux items de passer à la ligne suivante
Répartition : justify-content contrôle l'espacement sur l'axe principal
Alignement : align-items et align-self gèrent l'alignement sur l'axe secondaire
Flexibilité : flex-grow, flex-shrink et flex-basis déterminent comment les items se redimensionnent

Grid : la mise en page bidimensionnelle

CSS Grid Layout, souvent appelé simplement Grid, représente le premier véritable système de grille natif en CSS. Contrairement à Flexbox, il a été conçu dès le départ pour gérer simultanément les lignes et les colonnes.

Principe de fonctionnement

Grid fonctionne en divisant l'espace en lignes et colonnes, créant ainsi une grille bidimensionnelle. Lorsque vous appliquez display: grid à un élément, vous créez un grid container. Vous définissez ensuite explicitement votre grille avec grid-template-columns et grid-template-rows, ce qui crée des "tracks" (pistes) dans lesquelles vous pouvez positionner vos éléments.

La puissance de Grid réside dans sa capacité à contrôler simultanément la position horizontale et verticale de chaque élément. Vous pouvez placer un item précisément à l'intersection d'une ligne et d'une colonne, ou le faire s'étendre sur plusieurs cellules dans les deux directions.

Concepts clés

Les fondamentaux de Grid incluent :

Grid container : l'élément parent qui établit le contexte de grille
Grid items : les enfants directs du container
Grid lines : les lignes qui délimitent les tracks (numérotées à partir de 1)
Grid tracks : les rangées (rows) et colonnes (columns) de la grille
Grid cells : l'intersection d'une ligne et d'une colonne
Grid areas : des zones rectangulaires composées de plusieurs cellules
Gap : l'espacement entre les tracks
Placement : positionnement explicite avec grid-column et grid-row, ou nommage avec grid-template-areas

Différences conceptuelles majeures

Approche 1D vs 2D

La différence la plus évidente est dimensionnelle. Flexbox excelle dans la gestion d'une seule dimension à la fois. Même si vous utilisez flex-wrap, vous créez en réalité plusieurs lignes flex indépendantes, chacune gérant sa propre distribution d'espace. Grid, en revanche, conçoit l'espace comme un tout unifié où les éléments s'alignent parfaitement dans les deux dimensions.

Content-first vs Layout-first

Flexbox adopte une approche "content-first" : la taille des flex items influence la disposition finale. Si vous avez trois items de tailles différentes, Flexbox adaptera leur placement naturellement.

Grid fonctionne en mode "layout-first" : vous définissez d'abord la structure, puis vous y placez vos éléments. La grille existe indépendamment du contenu.

Flexibilité vs Structure

Flexbox offre une grande flexibilité et s'adapte naturellement aux changements. Ajoutez un élément, et le container redistribue automatiquement l'espace. Cette fluidité est idéale pour des composants dynamiques.

Grid fournit une structure plus prévisible. Vous définissez explicitement votre grille, ce qui garantit un alignement parfait mais demande plus de planification initiale.

Quand utiliser Flexbox

Flexbox brille dans des contextes spécifiques où sa nature unidimensionnelle et son approche orientée contenu sont des atouts majeurs. Explorons les situations où il constitue le choix optimal.

Cas d'usage typiques

Navigation horizontale et menus

Les barres de navigation sont l'exemple canonique de Flexbox. Que vous ayez une liste de liens horizontaux, un menu avec un logo à gauche et des liens à droite, ou une navigation responsive, Flexbox gère ces scénarios avec élégance.

La possibilité de distribuer l'espace avec justify-content: space-between ou d'utiliser margin-left: auto pour pousser un élément à l'extrémité opposée rend la création de headers intuitive.

Barres d'outils et composants d'interface

Pensez à tous ces petits composants UI : une barre d'outils avec des boutons, un groupe de badges, une zone de notification avec icône, texte et bouton de fermeture. Ces éléments s'organisent le long d'un axe unique et doivent s'aligner correctement entre eux.

Alignement de contenu dans une direction

Lorsque votre besoin principal est d'aligner ou de distribuer des éléments le long d'un seul axe, Flexbox est imbattable. Créer une liste d'éléments espacés uniformément, centrer un formulaire, ou aligner le bas de plusieurs colonnes devient trivial.

La propriété align-items: center résout instantanément le problème du centrage vertical, tandis que justify-content offre un contrôle fin sur la distribution.

Répartition d'espace entre éléments

Flexbox gère brillamment les situations où vous devez répartir l'espace disponible selon des proportions définies. Un élément doit occuper deux fois plus d'espace qu'un autre ? Utilisez flex-grow: 2 sur l'un et flex-grow: 1 sur l'autre. Cette capacité à créer des layouts fluides et proportionnels permet des interfaces qui s'adaptent naturellement.

Avantages de Flexbox

Simplicité pour les layouts simples

L'un des plus grands atouts de Flexbox est sa courbe d'apprentissage douce. Trois lignes de CSS suffisent souvent pour résoudre un problème d'alignement :

CSS

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

Cette simplicité réduit la charge cognitive et accélère le développement pour les layouts unidimensionnels.

Excellent pour les composants

Flexbox a été adopté massivement dans les systèmes de design précisément parce qu'il correspond à la granularité des composants UI. Un bouton avec une icône, une carte avec header et footer : tous ces éléments sont essentiellement unidimensionnels dans leur organisation interne.

Comportement naturel avec le contenu dynamique

Lorsque le contenu est imprévisible - labels de longueurs variables, nombre d'éléments inconnu, tailles d'images différentes - Flexbox s'adapte automatiquement. Son comportement par défaut respecte la taille intrinsèque du contenu tout en permettant une flexibilité contrôlée.

Facilité d'alignement vertical

Avant Flexbox, centrer verticalement était un challenge frustrant. align-items: center centre tous les flex items sur l'axe secondaire, tandis que align-self permet un contrôle individuel. Cette simplicité a libéré les développeurs d'innombrables heures de débogage.

Exemples concrets avec code

Exemple 1 : barre de navigation classique

HTML

<nav class="navbar">

  <div class="navbar__logo">Mon Site</div>

  <ul class="navbar__links">

    <li><a class="navbar__link" href="#">Accueil</a></li>

    <li><a class="navbar__link" href="#">Produits</a></li>

    <li><a class="navbar__link" href="#">Contact</a></li>

  </ul>

</nav>

CSS

.navbar {

  display: flex;

  align-items: center;

  padding: 1rem 2rem;

  background: #333;

  gap: 2rem;

}

.navbar__logo {

  color: #fff;

  font-weight: bold;

  font-size: 1.5rem;

}

.navbar__links {

  display: flex;

  gap: 1.5rem;

  margin-right: 0;

  margin-left: auto; /* Pousse les liens à droite */

  list-style: none;

  padding: 0;

}

.navbar__link {

  color: #fff;

  text-decoration: none;

}

Exemple 2 : carte avec contenu flexible

HTML

<article class="card">

  <img 

    src="https://placehold.co/300x200" 

    alt="Produit" 

    class="card__image"

  >

  <div class="card__content">

    <h3 class="card__title">Mon produit</h3>

    <p class="card__description">

      Lorem ipsum dolor sit amet consectetur adipisicing elit.

    </p>

    <footer class="card__footer">

      <span class="card__price">299 €</span>

      <button class="card__button">Ajouter au panier</button>

    </footer>

  </div>

</article>

CSS

.card {

  display: flex;

  flex-direction: column;

  border: 1px solid #ddd;

  border-radius: 8px;

  overflow: hidden;

  max-width: 300px;

}

.card__image {

  object-fit: cover;

  width: 100%;

  height: 200px;

}

.card__content {

  flex: 1; /* Occupe l'espace disponible */

  display: flex;

  flex-direction: column;

  gap: 1rem;

  padding: 1.5rem;

}

.card__title {

  margin: 0;

  font-size: 1.25rem;

}

.card__description {

  flex: 1; /* Pousse le footer en bas */

  color: #666;

  line-height: 1.6;

}

.card__footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: auto;

}

.card__price {

  color: #2563eb;

  font-weight: bold;

  font-size: 1.25rem;

}

.card__button {

  border: none;

  border-radius: 4px;

  background-color: #2563eb;

  cursor: pointer;

  padding: 0.5rem 1rem;

  color: white;

}

Exemple 3 : media object (icône + contenu)

HTML

<article class="media">

  <div class="media__icon">

    💬

  </div>

  <div class="media__content">

    <h3 class="media__title">Nouveau message</h3>

    <p class="media__description">

      Vous avez reçu un nouveau commentaire sur votre publication.

    </p>

  </div>

</article>

CSS

.media {

  display: flex;

  gap: 1rem;

  border: 1px solid #e5e7eb;

  border-radius: 8px;

  padding: 1rem;

}

.media__icon {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0; /* Empêche l'icône de rétrécir */

  border-radius: 50%;

  background-color: #dbeafe;

  width: 48px;

  height: 48px;

}

.media__content {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}

.media__title {

  margin: 0;

  font-weight: 600;

}

.media__description {

  margin: 0;

  color: #6b7280;

}

HTML

<div class="toolbar">

  <div class="toolbar__group">

    <button class="toolbar__button">Nouveau</button>

    <button class="toolbar__button">Ouvrir</button>

    <button class="toolbar__button">Sauvegarder</button>

  </div>

  <div class="toolbar__group">

    <button class="toolbar__button">Couper</button>

    <button class="toolbar__button">Copier</button>

    <button class="toolbar__button">Coller</button>

  </div>

  <div class="toolbar__spacer"></div>

  <div class="toolbar__group">

    <button class="toolbar__button toolbar__button--primary">Publier</button>

  </div>

</div>

CSS

.toolbar {

  display: flex;

  align-items: center;

  gap: 1rem;

  border: 1px solid #e5e7eb;

  background-color: #f9fafb;

  padding: 0.75rem 1rem;

}

.toolbar__group {

  display: flex;

  gap: 0.5rem;

}

.toolbar__group:not(:last-child) {

  border-right: 1px solid #e5e7eb;

  padding-right: 1rem;

}

.toolbar__spacer {

  flex: 1; /* Crée un espace flexible entre les groupes */

}

.toolbar__button {

  border: 1px solid #d1d5db;

  border-radius: 4px;

  background-color: #fff;

  cursor: pointer;

  padding: 0.5rem 1rem;

}

.toolbar__button--primary {

  border-color: #2563eb;

  background: #2563eb;

  color: white;

}

Ces exemples illustrent la versatilité de Flexbox pour gérer des layouts unidimensionnels, de la simple navigation aux composants plus élaborés.

Quand utiliser Grid ?

CSS Grid excelle dans les situations où vous devez gérer simultanément les deux dimensions de votre layout, ou lorsque vous avez besoin d'un contrôle précis sur le positionnement des éléments. Découvrons les contextes où Grid est le choix optimal.

Cas d'usage typiques

Layouts de page complets

Grid a été conçu pour gérer la structure globale des pages web. Lorsque vous devez créer une mise en page avec header, sidebar, contenu principal et footer, Grid permet de définir cette structure de manière déclarative et maintenable.

La possibilité de nommer les zones avec grid-template-areas rend le code particulièrement lisible - vous dessinez littéralement votre layout en CSS. Modifier la structure pour une version responsive devient aussi simple que de redéfinir votre grille dans une media query.

Grilles de cartes ou de produits

Les galeries d'images, listes de produits e-commerce, ou grilles de portfolios sont des cas d'usage parfaits pour Grid. Vous pouvez définir un nombre de colonnes qui s'adapte automatiquement avec repeat(auto-fit, minmax(250px, 1fr)), créant ainsi des grilles responsives sans media queries.

Grid garantit que tous les éléments s'alignent parfaitement sur les mêmes lignes et colonnes, créant une harmonie visuelle difficile à obtenir avec Flexbox.

Dashboards avec widgets de tailles variées

Les interfaces de type dashboard bénéficient énormément de Grid. Vous pouvez créer des layouts asymétriques où certains éléments occupent plusieurs cellules, tout en maintenant un alignement global cohérent.

La capacité de Grid à superposer des éléments et à les positionner avec précision permet de créer des interfaces riches sans recourir à du positionnement absolu fragile.

Contrôle précis en 2D

Dès que vous pensez en termes de "cette section doit s'aligner verticalement avec celle-ci" ou "cet élément doit occuper trois colonnes et deux rangées", vous êtes dans un territoire où Grid excelle. Les formulaires complexes, les layouts de magazines, les interfaces kanban - tous profitent du contrôle bidimensionnel de Grid.

Avantages de Grid

Contrôle simultané des deux dimensions

L'avantage fondamental de Grid est sa capacité à gérer lignes et colonnes comme un système unifié. Contrairement à Flexbox où flex-wrap crée essentiellement des lignes indépendantes, Grid maintient une cohérence entre toutes les rangées et colonnes.

Vos éléments dans la première rangée s'aligneront parfaitement avec ceux de la troisième rangée, même s'ils ont des contenus de tailles différentes.

Positionnement précis avec grid-template-areas

La syntaxe grid-template-areas est l'une des fonctionnalités les plus élégantes de CSS Grid. Elle permet de nommer des zones de votre grille et de créer des représentations visuelles de votre layout directement dans le CSS :

CSS

grid-template-areas:

  "header header header"

  "sidebar content content"

  "footer footer footer";

Cette approche rend le code immédiatement compréhensible, même pour quelqu'un qui découvre votre projet. La maintenance devient plus simple car vous pouvez visualiser la structure sans avoir à interpréter des propriétés abstraites.

Superposition d'éléments facilitée

Grid permet naturellement de placer plusieurs éléments dans la même cellule, créant des superpositions sans sortir du flux normal. Contrairement au positionnement absolu qui peut créer des problèmes de responsive, Grid maintient la relation structurelle entre les éléments.

Moins de markup HTML nécessaire

Avec Flexbox, vous devez parfois ajouter des wrappers supplémentaires pour obtenir certaines dispositions. Grid réduit ce besoin en permettant un positionnement direct des éléments enfants.

Cette économie de markup rend le HTML plus sémantique et plus facile à maintenir. Vous n'avez pas de <div class="row"> et <div class="col"> partout - les enfants directs du grid container sont directement positionnés où ils doivent être.

Exemples concrets avec code

Exemple 1 : layout de page avec zones nommées

HTML

<div class="page-layout">

  <header class="header">

      <h1>Header</h1>

  </header>

  <aside class="sidebar">

      <h2>Navigation</h2>

  </aside>

  <main class="main">

      <h1>Contenu principal</h1>

  </main>

  <footer class="footer">

      <p>Footer</p>

  </footer>

</div>

CSS

.page-layout {

  display: grid;

  grid-template-columns: 250px 1fr;

  grid-template-rows: auto 1fr auto;

  grid-template-areas:

    "header header"

    "sidebar main"

    "footer footer";

  gap: 1rem;

  min-height: 100vh;

}

.header {

  grid-area: header;

  background-color: #1e293b;

  padding: 1rem 2rem;

  color: #fff;

}

.sidebar {

  grid-area: sidebar;

  background-color: #f1f5f9;

  padding: 1.5rem;

}

.main {

  grid-area: main;

  padding: 2rem;

}

.footer {

  grid-area: footer;

  background-color: #e2e8f0;

  padding: 1rem 2rem;

  text-align: center;

}

/* Version responsive */

@media (width <= 768px) {

  .page-layout {

    grid-template-columns: 1fr;

    grid-template-areas:

      "header"

      "main"

      "sidebar"

      "footer";

  }

}

Exemple 2 : grille de produits responsive

HTML

<div class="product-grid">

  <article class="product-card">

    <img src="https://placehold.co/300x250" alt="Produit 1" class="product-card__image">

    <div class="product-card__content">

      <h3>Casque Audio</h3>

      <p>199 €</p>

    </div>

  </article>

  <article class="product-card">

    <img src="https://placehold.co/300x250" alt="Produit 2" class="product-card__image">

    <div class="product-card__content">

      <h3>Souris Gamer</h3>

      <p>79 €</p>

    </div>

  </article>

</div>

<div class="featured-grid">

  <div class="featured-grid__item" style="background: #ef4444;">Featured 1 (2x2)</div>

  <div class="featured-grid__item" style="background: #3b82f6;">Featured 2 (2x1)</div>

  <div class="featured-grid__item" style="background: #10b981;">Item 3</div>

  <div class="featured-grid__item" style="background: #f59e0b;">Item 4</div>

  <div class="featured-grid__item" style="background: #8b5cf6;">Item 5</div>

  <div class="featured-grid__item" style="background: #06b6d4;">Item 6</div>

</div>

CSS

.product-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 2rem;

  padding: 2rem;

}

.product-card {

  transition: transform 0.2s;

  border: 1px solid #e5e7eb;

  border-radius: 8px;

  overflow: hidden;

}

.product-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

}

.product-card__image {

  object-fit: cover;

  width: 100%;

  height: 250px;

}

.product-card__content {

  padding: 1.5rem;

}

/* Grid avec colonnes de tailles différentes pour mise en avant */

.featured-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-auto-rows: 250px;

  gap: 1rem;

}

.featured-grid__item:first-child {

  grid-column: span 2;

  grid-row: span 2;

}

.featured-grid__item:nth-child(2) {

  grid-column: span 2;

}

Exemple 3 : dashboard avec widgets

CSS

.dashboard {

  display: grid;

  grid-auto-rows: minmax(60px, auto);

  gap: 1.5rem;

  padding: 2rem;

}

.widget {

  border-radius: 8px;

  background-color: #fff;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  padding: 1.5rem;

}

/* Widget principal - occupe 8 colonnes sur 2 rangées */

.widget--main {

  grid-column: span 8;

  grid-row: span 2;

}

/* Widgets secondaires - 4 colonnes sur 1 rangée */

.widget--secondary {

  grid-column: span 4;

}

/* Widget pleine largeur pour graphique */

.widget--chart {

  grid-column: 1 / -1;

  grid-row: span 3;

}

/* Widget statistique compact */

.widget--stat {

  grid-column: span 3;

}

@media (width <= 640px) {

  .widget {

    grid-column: 1 / -1;

  }

}

@media (640px > width >= 1024px) {

  .dashboard {

    grid-template-columns: repeat(6, 1fr);

  }

  .widget--main {

    grid-column: span 6;

  }

  .widget--secondary {

    grid-column: span 6;

  }

  .widget--stat {

    grid-column: span 3;

  }

}

@media (width >= 1024px) {

  .dashboard {

    grid-template-columns: repeat(12, 1fr);

  }

}

Exemple 4 : formulaire complexe avec alignement précis

CSS

.form-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1.5rem;

  max-width: 800px;

}

.form-field {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}

/* Certains champs occupent toute la largeur */

.form-field--full {

  grid-column: 1 / -1;

}

/* Zone de texte plus haute */

.form-field--textarea {

  grid-column: 1 / -1;

}

.form-field--textarea textarea {

  min-height: 120px;

  resize: vertical;

}

.form-label {

  color: #374151;

  font-weight: 500;

}

.form-input,

.form-textarea,

.form-select {

  border: 1px solid #d1d5db;

  border-radius: 6px;

  padding: 0.75rem;

  font-size: 1rem;

}

.form-input:focus,

.form-textarea:focus,

.form-select:focus {

  border-color: #2563eb;

  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);

  outline: none;

}

.form-actions {

  grid-column: 1 / -1;

  display: flex;

  justify-content: flex-end;

  gap: 1rem;

  border-top: 1px solid #e5e7eb;

  padding-top: 1rem;

}

HTML

<form class="form-grid">

  <div class="form-field">

    <label class="form-label">Prénom</label>

    <input type="text" class="form-input" />

  </div>

  <div class="form-field">

    <label class="form-label">Nom</label>

    <input type="text" class="form-input" />

  </div>

  <div class="form-field form-field--full">

    <label class="form-label">Email</label>

    <input type="email" class="form-input" />

  </div>

  <div class="form-field">

    <label class="form-label">Téléphone</label>

    <input type="tel" class="form-input" />

  </div>

  <div class="form-field">

    <label class="form-label">Pays</label>

    <select class="form-select">

      <option>France</option>

      <option>Belgique</option>

      <option>Suisse</option>

    </select>

  </div>

  <div class="form-field form-field--textarea">

    <label class="form-label">Message</label>

    <textarea class="form-textarea"></textarea>

  </div>

  <div class="form-actions">

    <button type="button" class="button button--secondary">Annuler</button>

    <button type="submit" class="button button--primary">Envoyer</button>

  </div>

</form>

Ces exemples démontrent la puissance de Grid pour créer des layouts sophistiqués avec un contrôle précis du positionnement en deux dimensions.

Combiner Flexbox et Grid

L'une des erreurs les plus courantes est de penser qu'il faut choisir entre Flexbox et Grid de manière exclusive. En réalité, leur combinaison intelligente permet de créer des interfaces robustes et élégantes.

Pourquoi les combiner ?

Complémentarité naturelle

Flexbox et Grid ne sont pas en compétition - ils résolvent des problèmes différents à des niveaux de granularité différents. Grid excelle à définir la structure macro de votre page, tandis que Flexbox brille dans l'organisation micro de vos composants.

Cette complémentarité reflète la manière dont on pense les interfaces : structure globale d'abord (header, sidebar, contenu), puis organisation des éléments internes (boutons, icônes, textes).

Nested layouts : Grid pour la structure, Flexbox pour les composants

Le pattern le plus efficace consiste à utiliser Grid pour définir les grandes zones de votre page, puis Flexbox à l'intérieur de ces zones pour organiser le contenu. Cette approche en couches correspond à la hiérarchie naturelle du HTML.

Imaginez une page e-commerce : Grid définit la disposition globale (header, filtres, grille de produits, aside). À l'intérieur de chaque carte produit, Flexbox organise l'image, le titre, le prix et le bouton. Dans le header, Flexbox gère l'alignement du logo, de la recherche et des icônes.

Cette séparation rend le code plus maintenable. Vous pouvez modifier la structure globale sans toucher aux composants, et vice-versa.

Patterns courants de combinaison

Pattern 1 : page avec cartes

HTML

<div class="page">

  <header style="grid-area: header; background: #1e40af; color: white; padding: 1rem 2rem;">

    <h1>Header</h1>

  </header>

  <aside style="grid-area: sidebar; background: #f1f5f9; padding: 1.5rem;">

    <h2>Navigation</h2>

  </aside>

  <main style="grid-area: main;">

    <div class="main__content">

      <article class="card">

        <header class="card__header">

          <h3 class="card__title">Projet 1</h3>

          <div class="card__actions">

            <button>🗑️</button>

          </div>

        </header>

        <div class="card__content">

          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>

        </div>

        <footer class="card__footer">

          <span>Priorité haute</span>

        </footer>

      </article>

      <article class="card">

        <header class="card__header">

          <h3 class="card__title">Projet 2</h3>

          <div class="card__actions">

            <button>🗑️</button>

          </div>

        </header>

        <div class="card__content">

          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>

        </div>

        <footer class="card__footer">

          <span>Priorité basse</span>

        </footer>

      </article>

    </div>

  </main>

  <aside style="grid-area: aside; background: #fef3c7; padding: 1.5rem;">

    <h2>Aside</h2>

  </aside>

  <footer style="grid-area: footer; background: #374151; color: white; padding: 1rem; text-align: center;">

    Footer

  </footer>

</div>

CSS

/* Grid pour la structure de page */

.page {

  display: grid;

  grid-template-columns: 250px 1fr 300px;

  grid-template-rows: auto 1fr auto;

  grid-template-areas:

    "header header header"

    "sidebar main aside"

    "footer footer footer";

  gap: 2rem;

  min-height: 100vh;

}

/* Grid pour la disposition des cartes */

.main__content {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  gap: 2rem;

}

/* Flexbox à l'intérieur de chaque carte */

.card {

  display: flex;

  flex-direction: column;

  border: 1px solid #e5e7eb;

  border-radius: 8px;

  overflow: hidden;

}

.card__header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid #e5e7eb;

  background-color: #f9fafb;

  padding: 1rem;

}

.card__title {

  margin: 0;

  font-weight: 600;

}

.card__actions {

  display: flex;

  gap: 0.5rem;

}

.card__content {

  flex: 1;

  padding: 1.5rem;

}

.card__footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid #e5e7eb;

  background-color: #f9fafb;

  padding: 1rem;

}

Pattern 2 : dashboard complet

CSS

/* Grid pour le layout du dashboard */

.dashboard {

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  grid-auto-rows: minmax(100px, auto);

  gap: 1.5rem;

  padding: 2rem;

}

/* Différentes tailles de widgets */

.widget--large {

  grid-column: span 8;

  grid-row: span 3;

}

.widget--medium {

  grid-column: span 6;

  grid-row: span 2;

}

.widget--small {

  grid-column: span 4;

  grid-row: span 2;

}

/* Flexbox à l'intérieur des widgets */

.widget {

  display: flex;

  flex-direction: column;

  border-radius: 8px;

  background-color: #fff;

  overflow: hidden;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}

.widget__header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid #e5e7eb;

  padding: 1.5rem;

}

.widget__title {

  margin: 0;

  font-weight: 600;

}

.widget__actions {

  display: flex;

  gap: 0.5rem;

}

.widget__content {

  flex: 1;

  padding: 1.5rem;

  overflow: auto;

}

/* Widget statistique avec Flexbox */

.stat-widget {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1.5rem;

}

.stat-widget__info {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}

.stat-widget__value {

  color: #1f2937;

  font-size: 2rem;

  font-weight: 700;

}

.stat-widget__icon {

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 12px;

  background-color: #dbeafe;

  width: 60px;

  height: 60px;

}

Pattern 3 : formulaire complexe

CSS

/* Grid pour la disposition du formulaire */

.form {

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: 1.5rem;

  max-width: 1000px;

}

.form-section {

  grid-column: 1 / -1;

  display: grid;

  grid-template-columns: subgrid;

  gap: 1.5rem;

  border-radius: 8px;

  background-color: #fff;

  padding: 2rem;

}

.form-field--half {

  grid-column: span 6;

}

.form-field--third {

  grid-column: span 4;

}

.form-field--full {

  grid-column: 1 / -1;

}

/* Flexbox pour les champs avec addons */

.input-group {

  display: flex;

  gap: 0;

}

.input-group__addon {

  display: flex;

  align-items: center;

  border: 1px solid #d1d5db;

  border-right: none;

  border-radius: 6px 0 0 6px;

  background-color: #f3f4f6;

  padding: 0 1rem;

}

.input-group__input {

  flex: 1;

  border-radius: 0 6px 6px 0;

}

/* Flexbox pour les actions */

.form-actions {

  grid-column: 1 / -1;

  display: flex;

  justify-content: flex-end;

  gap: 1rem;

  border-top: 1px solid #e5e7eb;

  padding-top: 1.5rem;

}

Pattern 4 : liste avec items complexes

CSS

/* Grid pour la liste */

.product-list {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1rem;

  padding: 2rem;

}

/* Flexbox pour chaque item */

.product-list-item {

  display: flex;

  gap: 1.5rem;

  border: 1px solid #e5e7eb;

  border-radius: 8px;

  background-color: #fff;

  padding: 1.5rem;

}

.product-list-item__image {

  flex-shrink: 0;

  object-fit: cover;

  border-radius: 6px;

  width: 120px;

  height: 120px;

}

.product-list-item__content {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}

.product-list-item__header {

  display: flex;

  align-items: start;

  justify-content: space-between;

}

.product-list-item__footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: auto;

}

.product-list-item__rating {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}

.product-list-item__actions {

  display: flex;

  gap: 0.75rem;

}

/* Version tablette : Grid 2 colonnes */

@media (768px <= width) {

  .product-list {

    grid-template-columns: repeat(2, 1fr);

  }

}

Ces patterns démontrent comment Grid et Flexbox travaillent ensemble naturellement. Grid gère la structure et le positionnement bidimensionnel, tandis que Flexbox s'occupe de l'alignement au niveau des composants.

Critères de décision pratiques

Au-delà de la théorie, comment choisir concrètement dans votre travail quotidien ? Voici un guide pratique pour prendre la bonne décision rapidement.

Questions à se poser

Le layout est-il unidimensionnel ou bidimensionnel ?

C'est la question fondamentale. Posez-vous simplement : "Est-ce que je pense en termes de rangées OU de colonnes, ou est-ce que je dois gérer les deux simultanément ?"

Si vous organisez des éléments le long d'une seule ligne (même avec wrap), Flexbox est le bon choix. Des boutons dans une toolbar, des items de menu, des badges côte à côte sont des contextes unidimensionnels.

Si vous devez contrôler lignes ET colonnes, et que l'alignement entre ces deux dimensions compte, Grid est préférable. Un layout de page avec header, sidebar et contenu, ou une grille de produits où l'alignement vertical entre rangées est important, sont bidimensionnels.

Ai-je besoin de contrôler la position précise des éléments ?

Avec Grid, vous pouvez dire exactement : "Cet élément commence à la colonne 2 et s'étend jusqu'à la colonne 5, de la rangée 1 à la rangée 3". Ce contrôle précis est difficile avec Flexbox.

Si votre design nécessite que certains éléments occupent des espaces spécifiques dans une structure définie, Grid est votre allié. À l'inverse, si vos éléments peuvent s'organiser naturellement selon leur taille, Flexbox offre cette flexibilité.

Le contenu dicte-t-il la mise en page ou l'inverse ?

Dans une approche "content-first", la taille du contenu influence la disposition. Flexbox excelle ici : ajoutez du contenu, et le layout s'adapte.

Dans une approche "layout-first", vous définissez d'abord une structure, puis y insérez le contenu. Grid fonctionne naturellement ainsi.

Quelle est la complexité du layout ?

Pour des layouts simples - une rangée de boutons, un header avec logo et navigation - Flexbox est plus rapide à implémenter. Le code reste minimal et explicite.

Pour des layouts complexes - une page avec plusieurs zones interdépendantes, un dashboard avec widgets de tailles variées - Grid offre une solution plus élégante que d'imbriquer plusieurs niveaux de Flexbox.

Le layout doit-il être responsive ?

Les deux gèrent très bien le responsive, mais différemment. Flexbox permet des layouts qui s'adaptent naturellement sans media queries, grâce à flex-wrap et aux propriétés de flexibilité.

Grid offre auto-fit et auto-fill avec minmax() pour des grilles responsives, mais excelle surtout quand vous voulez réorganiser complètement votre structure avec grid-template-areas.

Tableau comparatif

Voici un tableau de référence rapide pour vous aider à choisir :

Critère	Utiliser Flexbox	Utiliser Grid
Dimension	Layout unidimensionnel (ligne ou colonne)	Layout bidimensionnel (lignes ET colonnes)
Nature du contenu	Contenu qui dicte le layout	Structure fixe où le contenu s'insère
Complexité	Composants simples, barres d'outils, navigation	Layouts de page complets, structures complexes
Alignement	Sur un axe principal	Dans les deux dimensions
Contrôle	Distribution flexible de l'espace	Positionnement précis des éléments
Cas d'usage typiques	Menus, cartes, headers, toolbar	Pages, dashboards, grilles, magazines
Superposition	Difficile, nécessite positionnement	Naturel, plusieurs items par cellule
Responsive	Fluide avec flex-wrap	Restructuration avec media queries
Markup HTML	Parfois besoin de wrappers	Généralement moins de div

Exemples concrets de décision :

Situation : Créer une navigation horizontale avec logo à gauche et liens à droite

→ Flexbox (unidimensionnel, alignement simple)

Situation : Créer une page avec header, sidebar, contenu principal, aside et footer

→ Grid (bidimensionnel, structure de page)

Situation : Aligner une icône et du texte côte à côte

→ Flexbox (simple, unidimensionnel)

Situation : Créer une galerie d'images avec différentes tailles

→ Grid (contrôle bidimensionnel, alignement)

Situation : Organiser les éléments internes d'une carte (image, titre, description, bouton)

→ Flexbox (organisation verticale simple)

Situation : Créer un dashboard avec widgets de tailles variées

→ Grid (positionnement précis, structure complexe)

Situation : Espacer uniformément des badges ou des tags

→ Flexbox (distribution d'espace sur un axe)

Situation : Créer un formulaire avec champs de différentes largeurs alignés

→ Grid (alignement bidimensionnel des labels et inputs)

Arbre de décision simplifié :

1. Organisation principalement dans une direction ?

→ OUI : Flexbox probable

→ NON : continuez

2. Besoin d'aligner dans les deux dimensions ?

→ OUI : Grid probable

→ NON : continuez

3. Les éléments s'adaptent au contenu ?

→ OUI : Flexbox probable

→ NON : continuez

4. Structure fixe définie avant le contenu ?

→ OUI : Grid probable

→ NON : Flexbox probable

5. Composant isolé ou layout de page ?

→ Composant : Flexbox probable

→ Layout de page : Grid probable

Signaux d'alarme :

Vous utilisez peut-être le mauvais outil si :

Avec Flexbox :
- Vous imbriquez 3+ niveaux de flex containers
- Vous calculez des largeurs en pourcentage pour simuler des colonnes
- Vous avez du mal à maintenir l'alignement vertical entre rangées
- Beaucoup de margin-left: auto et calculs complexes
Avec Grid :
- Votre grille n'a qu'une rangée ou colonne
- Vous utilisez uniquement grid-template-columns: 1fr
- Le layout est très simple et Grid semble over-engineered
- Plus de temps à définir la grille qu'à styler

Règle d'or :

En cas de doute, commencez par Flexbox pour sa simplicité. Si vous luttez contre le système, c'est probablement le signe que Grid serait plus approprié. L'expérience vous donnera l'intuition du bon choix dès le départ.

Pièges courants et bonnes pratiques

Même avec une bonne compréhension théorique, certaines erreurs reviennent fréquemment. Identifions-les pour les éviter.

Erreurs fréquentes avec Flexbox

Sur-utilisation pour des layouts complexes

L'erreur la plus courante est de forcer Flexbox à gérer des layouts bidimensionnels complexes. Cela mène souvent à des structures HTML chargées et à du CSS difficile à maintenir.

CSS

/* ❌ Mauvaise approche : imbriquer des flex containers */

.layout {

  display: flex;

  flex-direction: column;

}

.content {

  display: flex;

}

.sidebar {

  display: flex;

  flex-direction: column;

}

.main {

  display: flex;

  flex-direction: column;

}

/* ✅ Meilleure approche : utiliser Grid pour la structure */

.layout {

  display: grid;

  grid-template-columns: 250px 1fr;

  grid-template-rows: auto 1fr auto;

  grid-template-areas:

    "header header"

    "sidebar main"

    "footer footer";

}

Oubli du flex-shrink et comportements inattendus

Par défaut, flex-shrink: 1 permet aux flex items de rétrécir. Cela peut causer des problèmes inattendus, particulièrement avec les images ou les éléments de taille fixe.

CSS

/* ❌ Problème : l'image rétrécit de façon disproportionnée */

.card {

  display: flex;

  gap: 1rem;

}

.card__image {

  width: 100px;

  /* L'image peut rétrécir en dessous de 100px */

}

/* ✅ Solution : empêcher le shrinking quand nécessaire */

.card__image {

  flex-shrink: 0; /* L'image garde sa taille */

  width: 100px;

}

Mauvaise utilisation de flex-basis

Confondre flex-basis avec width est une erreur commune. flex-basis définit la taille de base avant distribution de l'espace, pas la taille finale.

CSS

/* ❌ Résultat imprévisible */

.item {

  flex-basis: 200px;

  flex-grow: 1;

  /* L'élément ne fera pas forcément 200px */

}

/* ✅ Comprendre l'interaction des propriétés flex */

.item {

  flex: 1 0 200px; /* grow: 1, shrink: 0, basis: 200px */

  /* Taille minimum de 200px, peut grandir */

}

Oubli de flex-wrap

Ne pas utiliser flex-wrap: wrap quand nécessaire peut causer des débordements ou des éléments écrasés sur mobile.

CSS

/* ❌ Les items débordent sur petits écrans */

.navigation {

  display: flex;

  gap: 1rem;

}

/* ✅ Les items passent à la ligne si nécessaire */

.navigation {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

}

Problèmes avec min-width

Les flex items ont un min-width: auto implicite qui peut empêcher le shrinking en présence de contenu long.

CSS

/* ❌ Le texte long empêche le flex item de rétrécir */

.card {

  display: flex;

}

.card__content {

  flex: 1;

  /* Le texte peut déborder */

}

/* ✅ Permettre le wrapping du contenu */

.card__content {

  flex: 1;

  min-width: 0; /* Override le min-width: auto */

  overflow-wrap: break-word;

}

Erreurs fréquentes avec Grid

Sur-complication de layouts simples

Utiliser Grid pour des layouts qui seraient plus simples en Flexbox ajoute une complexité inutile.

CSS

/* ❌ Over-engineering pour un simple alignement */

.button-group {

  display: grid;

  grid-template-columns: repeat(3, auto);

  justify-content: end;

  gap: 0.5rem;

}

/* ✅ Flexbox est plus approprié ici */

.button-group {

  display: flex;

  justify-content: flex-end;

  gap: 0.5rem;

}

Grilles trop rigides

Spécifier des tailles fixes pour toutes les colonnes et rangées crée des layouts fragiles qui ne s'adaptent pas bien.

CSS

/* ❌ Grille trop rigide */

.grid {

  display: grid;

  grid-template-columns: 300px 600px 300px;

  grid-template-rows: 100px 400px 100px;

  /* Ne s'adapte pas aux différentes tailles d'écran */

}

/* ✅ Grille flexible */

.grid {

  display: grid;

  grid-template-columns: 1fr 2fr 1fr;

  grid-template-rows: auto 1fr auto;

  /* S'adapte au contenu et à l'espace disponible */

}

Zones non rectangulaires

Créer des grilles où les areas ne forment pas des rectangles valides provoque des erreurs.

CSS

/* ❌ Invalid : les zones doivent être rectangulaires */

.grid {

  grid-template-areas:

    "header header sidebar"

    "content sidebar sidebar"

    "footer footer footer";

  /* 'sidebar' ne forme pas un rectangle */

}

/* ✅ Zones rectangulaires valides */

.grid {

  grid-template-areas:

    "header header header"

    "content content sidebar"

    "footer footer footer";

}

Auto-fit et auto-fill

Ces deux valeurs semblent similaires mais ont des comportements différents importants.

CSS

/* auto-fill : crée des tracks vides si l'espace le permet */

.grid-fill {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  /* Les colonnes vides restent dans la grille */

}

/* auto-fit : collapse les tracks vides */

.grid-fit {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  /* Les items grandissent pour remplir l'espace disponible */

}

Utilisez auto-fit quand vous voulez que les éléments s'étendent pour remplir tout l'espace, et auto-fill quand vous voulez maintenir une largeur maximale constante.

Bonnes pratiques

Commencer simple

La meilleure approche est souvent la plus simple. Ne présumez pas qu'un layout complexe nécessite un code complexe. Testez d'abord une solution simple avant d'ajouter de la complexité.

Penser mobile-first

Ne créez pas d'abord une version desktop puis essayez de la "casser" en mobile. Pensez mobile-first et enrichissez progressivement.

CSS

/* ✅ Mobile-first avec Grid */

.grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1rem;

}

@media (min-width: 640px) {

  .grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (min-width: 1024px) {

  .grid {

    grid-template-columns: repeat(3, 1fr);

  }

}

/* ✅ Ou utilisez une grille auto-responsive */

.grid-auto {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));

  gap: 1rem;

  /* S'adapte automatiquement sans media queries */

}

Utiliser les outils de développement

Chrome, Firefox et Safari ont d'excellents overlays pour visualiser Flexbox et Grid. Utilisez-les pour comprendre comment vos layouts fonctionnent réellement.

Documenter les choix complexes

Quand vous créez un layout non-trivial, ajoutez un commentaire expliquant pourquoi vous avez choisi Grid ou Flexbox, et comment la structure fonctionne.

CSS

/**

 * Dashboard utilisant Grid pour positionner les widgets * de tailles variées. Widgets utilisent Flexbox en interne.

 */

.dashboard {

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: 1.5rem;

}

Nommer vos grilles pour plus de clarté

Utilisez grid-template-areas avec des noms significatifs plutôt que des numéros de lignes quand le layout le permet.

CSS

/* ❌ Moins lisible avec numéros */

.header {

  grid-column: 1 / -1;

  grid-row: 1 / 2;

}

.sidebar {

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

/* ✅ Plus lisible avec areas nommées */

.container {

  grid-template-areas:

    "header header"

    "sidebar main";

}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

Utiliser des variables CSS pour la maintenabilité

Définissez vos valeurs de gap, colonnes, etc. comme variables pour faciliter les ajustements globaux.

CSS

:root {

  --grid-gap: 1.5rem;

  --sidebar-width: 250px;

  --content-max-width: 1200px;

}

.layout {

  display: grid;

  grid-template-columns: var(--sidebar-width) 1fr;

  gap: var(--grid-gap);

  max-width: var(--content-max-width);

}

Tester sur du contenu réel

Lorem ipsum peut masquer des problèmes. Testez toujours avec du contenu de longueurs variées, des mots longs, et des cas limites.

CSS

/* Anticipez le contenu long */

.card__title {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  /* ou */

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

Préférer gap à margin pour l'espacement

gap (anciennement grid-gap et flex-gap) est plus prévisible et évite les problèmes de marges qui s'accumulent.

CSS

/* ❌ Marges peuvent s'additionner et déborder */

.container > * {

  margin-right: 1rem;

  margin-bottom: 1rem;

}

/* ✅ Gap est plus propre et prévisible */

.container {

  display: grid;

  gap: 1rem;

}

Classes utilitaires pour les patterns courants

Pour les patterns que vous utilisez souvent, créez des classes utilitaires ou des mixins.

CSS

/* Classes utilitaires pour patterns courants */

.flex-center {

  display: flex;

  align-items: center;

  justify-content: center;

}

.flex-between {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.grid-auto-fit {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));

  gap: 1.5rem;

}

Conclusion

Flexbox et Grid ne sont pas des concurrents mais des partenaires dans la création de layouts modernes. Leur utilisation combinée est la clé d'une architecture CSS élégante et maintenable.

Récapitulatif des principes clés

Flexbox excelle dans l'organisation unidimensionnelle, l'alignement de composants, et les layouts qui s'adaptent au contenu. Utilisez-le pour vos navigations, cartes, toolbars, et tout contexte où vous pensez en une seule direction.
Grid brille dans la gestion bidimensionnelle, les structures de page complexes, et le positionnement précis. Privilégiez-le pour vos layouts de page, dashboards, galeries, et tout cas où l'alignement en 2D compte.
La combinaison gagnante : Grid pour la structure macro, Flexbox pour les composants micro.

Il n'y a pas de mauvais choix, juste des outils différents

Un layout peut souvent être créé avec l'un ou l'autre. Si votre solution fonctionne, est maintenable et performante, c'est un bon choix. L'important est de comprendre les compromis.

Ne vous laissez pas paralyser par la recherche de perfection. Un code qui fonctionne aujourd'hui vaut mieux qu'un code parfait qui n'existe pas. Vous pouvez toujours refactoriser avec plus d'expérience.

Maîtriser les deux est essentiel

Dans le développement web moderne, Flexbox et Grid sont des compétences fondamentales. Investir du temps pour bien les comprendre est l'un des meilleurs investissements pour votre carrière.

Plus vous les utiliserez, plus votre intuition se développera. Vous commencerez à "voir" les layouts en termes de grilles et de flux flex. Cette vision devient une seconde nature.

Expérimenter

La meilleure façon d'apprendre est de pratiquer. Créez des layouts expérimentaux, recréez des designs que vous voyez sur le web, défiez-vous avec des structures complexes.

N'ayez pas peur de vous tromper. Une erreur qui vous force à comprendre pourquoi votre layout ne fonctionne pas est plus instructive qu'un succès immédiat.

Le futur des layouts CSS

CSS continue d'évoluer. Subgrid (déjà bien supporté) permet aux grid items de participer à la grille de leur parent, ouvrant de nouvelles possibilités. Les Container Queries changent la façon dont on pense le responsive design en permettant aux composants de réagir à leur propre conteneur plutôt qu'au viewport.

Mais les fondamentaux de Flexbox et Grid resteront pertinents. Ce sont des primitives solides sur lesquelles les futures innovations continueront de s'appuyer. Maîtriser ces bases vous prépare pour tout ce qui viendra ensuite.

En définitive

Utilisez Flexbox pour organiser des éléments le long d'un axe. Utilisez Grid pour créer des structures bidimensionnelles. Combinez-les intelligemment.

Le choix n'est pas une question de dogme mais de pragmatisme. Avec l'expérience, vous développerez l'instinct de savoir quel outil saisir pour chaque tâche. C'est là que réside la vraie expertise : la capacité à choisir rapidement et efficacement la bonne approche.

Cet article a été rédigé par Aurore, intégratrice web chez ACSEO. Découvrez également deux autres de ses publications dédiées à l'intégration :

Ressources complémentaires

Documentation officielle :

MDN Web Docs - Flexbox : documentation complète et exemples pratiques
MDN Web Docs - Grid : guide exhaustif sur CSS Grid

Guides de référence :

CSS-Tricks - A Complete Guide to Flexbox : le guide de référence sur Flexbox
CSS-Tricks - A Complete Guide to Grid : le guide de référence sur Grid

Apprendre de manière ludique :

Outils :

Flexbox Generator : Générateur visuel de layouts Flexbox
CSS Grid Generator : Générateur visuel de layouts Grid

Publié le 06/05/2026 à 11:59

Flexbox vs Grid : quand utiliser l’un ou l’autre ?

Sommaire

Une idée, un projet ?

S’inscrire à la newsletter ACSEO

Sommaire

Comprendre les fondamentaux

Flexbox : la mise en page unidimensionnelle

Principe de fonctionnement

Concepts clés

Grid : la mise en page bidimensionnelle

Principe de fonctionnement

Concepts clés

Différences conceptuelles majeures

Approche 1D vs 2D

Content-first vs Layout-first

Flexibilité vs Structure

Quand utiliser Flexbox

Cas d'usage typiques

Navigation horizontale et menus

Barres d'outils et composants d'interface

Alignement de contenu dans une direction

Répartition d'espace entre éléments

Avantages de Flexbox

Simplicité pour les layouts simples

Excellent pour les composants

Comportement naturel avec le contenu dynamique

Facilité d'alignement vertical

Exemples concrets avec code

Exemple 1 : barre de navigation classique

Exemple 2 : carte avec contenu flexible

Exemple 3 : media object (icône + contenu)

Exemple 4 : toolbar avec groupes d'actions

Quand utiliser Grid ?

Cas d'usage typiques

Layouts de page complets

Grilles de cartes ou de produits

Dashboards avec widgets de tailles variées

Contrôle précis en 2D

Avantages de Grid

Contrôle simultané des deux dimensions

Positionnement précis avec grid-template-areas

Superposition d'éléments facilitée

Moins de markup HTML nécessaire

Exemples concrets avec code

Exemple 1 : layout de page avec zones nommées

Exemple 2 : grille de produits responsive

Exemple 3 : dashboard avec widgets

Exemple 4 : formulaire complexe avec alignement précis

Combiner Flexbox et Grid

Pourquoi les combiner ?

Complémentarité naturelle

Nested layouts : Grid pour la structure, Flexbox pour les composants

Patterns courants de combinaison

Pattern 1 : page avec cartes

Pattern 2 : dashboard complet

Pattern 3 : formulaire complexe

Pattern 4 : liste avec items complexes

Critères de décision pratiques

Questions à se poser

Le layout est-il unidimensionnel ou bidimensionnel ?

Ai-je besoin de contrôler la position précise des éléments ?

Le contenu dicte-t-il la mise en page ou l'inverse ?

Quelle est la complexité du layout ?

Le layout doit-il être responsive ?

Tableau comparatif

Exemples concrets de décision :

Arbre de décision simplifié :

Signaux d'alarme :

Règle d'or :

Pièges courants et bonnes pratiques

Erreurs fréquentes avec Flexbox

Sur-utilisation pour des layouts complexes

Oubli du flex-shrink et comportements inattendus

Mauvaise utilisation de flex-basis

Oubli de flex-wrap

Problèmes avec min-width

Erreurs fréquentes avec Grid

Sur-complication de layouts simples

Grilles trop rigides

Zones non rectangulaires