CSS Grid : guide pratique des mises en page modernes

CSS Grid est la manière la plus puissante d'organiser des pages web sur un système bidimensionnel de lignes et de colonnes. Après des années à se débattre avec float, des tableaux et de fragiles marges négatives, Grid a enfin permis de contrôler le placement vertical et horizontal en même temps, en écrivant quelques lignes sur un conteneur. Dans ce guide, nous avancerons pas à pas, des concepts de base jusqu'à la construction d'un véritable squelette de page.

En quoi Grid diffère-t-il de Flexbox ?

Les deux sont des outils de mise en page modernes, mais conçus pour des tâches différentes. Flexbox est unidimensionnel : il aligne les éléments le long d'une seule ligne ou d'une seule colonne. CSS Grid est bidimensionnel : il définit les lignes et les colonnes ensemble, ce qui vous permet de placer un élément exactement dans la cellule voulue, sur les deux axes.

Flexbox : les flux à axe unique comme une barre de navigation, un groupe de boutons ou le contenu d'une carte.
Grid : les structures réellement tabulaires comme un squelette de page, une galerie, un tableau de bord ou une grille de cartes.

En pratique, on les utilise ensemble : Grid pour le squelette externe, Flexbox à l'intérieur des cartes.

Votre première grille : modèles de lignes et de colonnes

Lorsque vous donnez à un élément display: grid, il devient un conteneur de grille et ses enfants directs deviennent des éléments de grille. Vous définissez les colonnes avec grid-template-columns et les lignes avec grid-template-rows :

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

Ce code crée trois colonnes fixes séparées par un espace de 16px. Mais les valeurs fixes en pixels ne sont pas flexibles. C'est là qu'intervient mon unité Grid préférée : fr (l'unité de fraction). fr divise l'espace disponible en proportions :

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

Désormais, les trois colonnes se partagent équitablement la largeur disponible. Si vous aviez écrit 2fr 1fr 1fr, la première colonne serait deux fois plus large que les autres.

repeat(), minmax() et une vraie flexibilité

Plutôt que d'écrire la même valeur à répétition, utilisez la fonction repeat(). minmax() donne à une colonne une borne minimale et une borne maximale. Combinez les deux et vous obtenez une grille responsive :

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

Cette unique ligne est remarquablement puissante. Avec auto-fit, le navigateur calcule combien de colonnes tiennent à l'écran tout en gardant chacune à au moins 220px de large, puis répartit l'espace restant de façon égale grâce à 1fr. Résultat : une grille de cartes qui affiche quatre colonnes sur un grand écran, deux sur une tablette et une sur un téléphone, sans une seule media query.

La différence entre auto-fit et auto-fill est subtile : auto-fit réduit les pistes vides et étire les éléments existants, tandis que auto-fill conserve les colonnes vides invisibles. Pour la plupart des dispositions de cartes, auto-fit paraît plus naturel.

Un squelette de page avec des zones nommées

La fonctionnalité la plus lisible de Grid est grid-template-areas. Vous décrivez la mise en page presque comme un dessin ASCII :

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

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

Cela construit une mise en page d'application classique : une barre latérale à largeur fixe à gauche, et un en-tête, un contenu et un pied de page empilés à droite. Pour passer à une seule colonne sur mobile, il suffit de redéfinir le modèle :

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

Sans toucher au HTML, nous avons déplacé la barre latérale tout en bas en changeant simplement le modèle. C'est précisément cette facilité de maintenance qui fait briller Grid.

Placer les éléments par numéros de ligne

Les lignes de la grille sont numérotées à partir de 1. Vous décidez du nombre de colonnes ou de lignes qu'un élément occupe avec grid-column et grid-row :

.vedette {
  grid-column: 1 / 3;   /* de la ligne 1 à la ligne 3 : occupe deux colonnes */
  grid-row: 1 / 2;
}

Le mot-clé span est plus lisible : grid-column: span 2; indique à un élément de couvrir deux colonnes à partir de sa position. Pour aligner les cellules, utilisez justify-items (horizontal) et align-items (vertical) ; pour aligner un seul élément à part, il existe justify-self et align-self.

Erreurs fréquentes

Utiliser Grid pour tout : un menu d'une seule ligne reste plus simple avec Flexbox.
Fixer des hauteurs : laissez les lignes sur auto pour qu'elles grandissent avec le contenu.
Utiliser margin au lieu de gap : la propriété gap de Grid gère les espacements de manière cohérente sans déborder sur les bords.
Confondre auto-fit / auto-fill : si vous voyez des colonnes vides inattendues, vous avez sans doute choisi la mauvaise.

Questions fréquentes

Quels navigateurs prennent en charge CSS Grid ?

Tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) prennent pleinement en charge CSS Grid depuis des années. Hormis l'ancien Internet Explorer, il n'y a quasiment plus de souci de compatibilité ; vous pouvez l'utiliser sereinement en production sur les projets actuels.

Dois-je utiliser Grid ou Flexbox ?

Si vous organisez le contenu sur deux axes (lignes et colonnes), optez pour Grid ; si vous alignez sur un seul axe, utilisez Flexbox. Dans la plupart des projets réels, ils s'imbriquent : Grid pour le squelette externe, Flexbox pour l'alignement à l'intérieur des composants.

L'unité fr est-elle meilleure que les pourcentages ?

En général oui. fr répartit l'espace restant en tenant automatiquement compte des espacements gap, alors qu'avec les pourcentages vous devez soustraire les écarts vous-même. Cela fait de fr un choix plus sûr et plus propre pour les proportions dans une grille.

Besoin d'une interface rapide, responsive et basée sur Grid pour votre projet ? Je crée des mises en page propres et faciles à maintenir avec du CSS moderne. Contactez-moi pour discuter de votre idée.