CSS Grid : maîtriser la mise en page moderne

CSS Grid est le système de mise en page en deux dimensions du web moderne. Là où les anciennes techniques (flottants, positionnement absolu, tableaux détournés) exigeaient des contorsions, Grid permet de décrire une grille de lignes et de colonnes et d’y placer le contenu de façon lisible. Ce guide vous apprend à maîtriser CSS Grid pas à pas : la structure de base, l’unité fr, minmax(), auto-fit, les zones nommées, jusqu’au responsive sans une seule media query.

Grid ou Flexbox : lequel choisir ?

La question revient sans cesse, et la réponse tient en un mot : la dimension. Flexbox travaille sur un seul axe à la fois (une ligne ou une colonne). Grid travaille sur deux axes simultanément (lignes et colonnes). Les deux ne sont pas concurrents mais complémentaires.

Utilisez Flexbox quand vous alignez une série d’éléments dans une direction : une barre de navigation, une rangée de boutons, un groupe d’étiquettes. Utilisez Grid dès que vous pensez « lignes et colonnes » en même temps : la structure globale d’une page, une galerie, un tableau de bord. Dans la pratique, on combine souvent les deux — une grille pour la page, et du Flexbox à l’intérieur de chaque cellule.

À retenir : Flexbox pour aligner du contenu sur un axe, Grid pour poser une structure sur deux axes. Le choix se fait selon le problème, pas selon les préférences.

La grille de base : colonnes et lignes

Tout commence par display: grid sur un conteneur, puis la définition des colonnes avec grid-template-columns.

.grille {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 16px;
}

<div class="grille">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Ici, trois colonnes de 200 pixels sont créées. Les éléments enfants se placent automatiquement de gauche à droite, et passent à la ligne suivante une fois les colonnes remplies. La propriété gap gère l’espacement entre les cellules — fini les marges bricolées.

L’unité `fr` : répartir l’espace disponible

Les valeurs fixes en pixels sont rarement idéales : elles ne s’adaptent pas à la largeur de l’écran. L’unité fr (pour fraction) résout ce problème en distribuant l’espace restant proportionnellement.

.grille {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

Ces trois colonnes se partagent l’espace en parts égales, quelle que soit la largeur du conteneur. On peut aussi mélanger les proportions :

.layout {
  display: grid;
  grid-template-columns: 1fr 3fr; /* la 2e colonne est 3× plus large */
}

C’est le motif classique d’une barre latérale (une part) accolée à un contenu principal (trois parts). Pour éviter de répéter 1fr 1fr 1fr, la fonction repeat() condense l’écriture :

.grille {
  grid-template-columns: repeat(3, 1fr); /* équivaut à 1fr 1fr 1fr */
}

`minmax()` : des colonnes qui respirent

Une colonne peut avoir besoin d’une largeur minimale pour rester lisible, tout en profitant de la place disponible. C’est le rôle de minmax(min, max).

.carte {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 16px;
}

Chaque colonne ne descendra jamais sous 150 pixels, mais s’étirera jusqu’à 1fr si la place le permet. C’est la brique de base d’une grille souple.

`auto-fit` et `auto-fill` : le responsive automatique

Voici la combinaison qui change tout. Associée à repeat() et minmax(), la valeur auto-fit crée autant de colonnes que l’espace le permet, sans que vous ayez à préciser leur nombre.

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

Lisez cette règle ainsi : « crée des colonnes d’au moins 220 pixels, et mets-en autant que possible sur la largeur ». Sur un grand écran, vous obtenez peut-être cinq colonnes ; sur une tablette, trois ; sur un téléphone, une seule. Le tout sans une seule media query. La grille se réorganise seule.

La différence entre auto-fit et auto-fill est subtile : auto-fill conserve des colonnes vides si l’espace est disponible, tandis que auto-fit étire les colonnes existantes pour combler le vide. Dans la majorité des cas, auto-fit donne le rendu attendu.

Piège fréquent : sur mobile, minmax(300px, 1fr) peut provoquer un débordement horizontal si l’écran fait moins de 300 pixels utiles. Préférez une valeur minimale raisonnable (200 à 240 px) ou combinez avec min(), par exemple minmax(min(100%, 220px), 1fr).

Placer les éléments : lignes de grille

Grid numérote les lignes (au sens des traits qui séparent les cases). Un élément peut s’étendre sur plusieurs colonnes ou rangées grâce à grid-column et grid-row.

.mise-en-avant {
  grid-column: 1 / 3; /* de la ligne 1 à la ligne 3 : 2 colonnes */
  grid-row: 1 / 2;
}

Le mot-clé span est souvent plus lisible : grid-column: span 2; signifie « occupe deux colonnes à partir de la position courante ». C’est pratique pour mettre en avant une carte dans une galerie.

Les zones nommées : la lisibilité maximale

La fonctionnalité la plus élégante de Grid est sans doute grid-template-areas. Elle permet de dessiner la mise en page directement dans le CSS, avec des noms parlants.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "entete  entete"
    "menu    contenu"
    "pied    pied";
  min-height: 100vh;
  gap: 12px;
}

.page header  { grid-area: entete; }
.page nav     { grid-area: menu; }
.page main    { grid-area: contenu; }
.page footer  { grid-area: pied; }

<div class="page">
  <header>Logo</header>
  <nav>Navigation</nav>
  <main>Contenu principal</main>
  <footer>Mentions légales</footer>
</div>

La structure saute aux yeux : l’en-tête et le pied s’étalent sur toute la largeur, le menu et le contenu se partagent la rangée centrale. Le mot répété (entete entete) indique qu’une zone occupe deux colonnes, et un point . marque une cellule volontairement vide. Ce système rend la maquette auto-documentée.

Responsive : réorganiser sans dupliquer le HTML

Avec les zones nommées, adapter la mise en page au mobile se résume à redessiner la grille. Le HTML ne bouge pas.

@media (max-width: 600px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "entete"
      "menu"
      "contenu"
      "pied";
  }
}

Sur petit écran, tout s’empile en une colonne. Cette séparation nette entre structure (le HTML) et présentation (le CSS) est exactement ce que Grid cherche à encourager. Cela dit, pour de nombreuses galeries, le duo auto-fit + minmax() vu plus haut suffit à obtenir un rendu fluide sans media query du tout.

Alignement dans la grille

Grid offre un contrôle fin de l’alignement, sur les deux axes. justify-items et align-items positionnent le contenu à l’intérieur de chaque cellule ; justify-content et align-content positionnent la grille entière dans son conteneur.

.grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center; /* horizontal, dans chaque cellule */
  align-items: center;   /* vertical, dans chaque cellule */
}

Le fameux « centrer un élément » devient trivial : une grille d’une seule cellule avec place-items: center (raccourci de align-items + justify-items) et c’est réglé.

Par où commencer en pratique

Pour intégrer Grid à votre pratique, une progression naturelle fonctionne bien. Commencez par remplacer une galerie d’images par repeat(auto-fit, minmax(...)) : l’effet responsive immédiat est motivant. Passez ensuite à la structure globale d’une page avec les zones nommées. Enfin, jouez avec grid-column: span pour des mises en avant. Si vous débutez tout juste en développement front, notre guide pour apprendre JavaScript complète utilement ces bases visuelles côté logique.

Grid n’est pas figé : il coexiste très bien avec Flexbox, et les deux forment aujourd’hui le socle de toute mise en page web. Le meilleur apprentissage reste l’expérimentation directe dans les outils de développement du navigateur, où vous voyez la grille se dessiner en temps réel.