Maîtriser CSS Grid : construire toutes les mises en page imaginables

CSS Grid est le système de mise en page le plus puissant de CSS. Ce tutoriel vous accompagne depuis votre première grille jusqu’à des mises en page complexes et concrètes — et chaque concept s’accompagne d’une démo interactive que vous pouvez voir rendue directement ici dans le navigateur, à côté du code qui la produit. Redimensionnez la fenêtre ou ouvrez l’inspecteur de grille de votre navigateur pour observer la réaction de chaque exemple.

Comment fonctionne Grid

Flexbox dispose le contenu dans une seule direction — une ligne ou une colonne. Grid travaille dans deux dimensions à la fois : vous définissez des colonnes et des lignes, puis vous placez les éléments dans les cellules qu’elles créent. Cela fait de Grid l’outil idéal pour les mises en page de niveau page, les tableaux de bord, les galeries d’images et tout design où l’alignement compte à la fois horizontalement et verticalement.

Chaque démonstration ci-dessous est un véritable CSS Grid rendu par votre navigateur — pas une capture d’écran. Chacune est placée à côté du code qui la produit, afin que vous puissiez lire la règle et en voir l’effet au même endroit.

Premiers pas avec Grid

Créer un conteneur Grid

Définissez display: grid sur un conteneur, déclarez vos colonnes, et les enfants deviennent automatiquement des éléments de grille.

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

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Six éléments se répartissent dans trois colonnes égales, passant automatiquement à une nouvelle ligne. Le gap est la gouttière visible entre chaque cellule.

Propriétés essentielles de Grid

Définir les colonnes et les lignes

grid-template-columns accepte des longueurs fixes, des fractions flexibles ou un mélange des deux. Voici les modèles auxquels vous ferez le plus souvent appel.

/* Fixed sizes */
grid-template-columns: 200px 200px 200px;

/* Flexible sizes */
grid-template-columns: 1fr 2fr 1fr;

/* Mixed */
grid-template-columns: 200px 1fr 200px;

/* Repeat function */
grid-template-columns: repeat(4, 1fr);

/* Auto-fit for responsive grids */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Le modèle 1fr 2fr 1fr divise la ligne en quatre parts et en attribue deux à la colonne centrale :

Mélanger des pistes fixes et flexibles fige les colonnes extérieures et laisse le centre absorber le reste de la largeur :

L’unité fr et minmax()

L’unité fr représente une fraction de l’espace restant dans le conteneur, réparti après soustraction des pistes fixes et des gouttières. Combinez-la avec minmax(min, max) pour donner à une piste un plancher et un plafond : minmax(250px, 1fr) ne laisse jamais une colonne descendre sous 250px mais lui permet de grandir et de remplir l’espace. Cette association est le moteur des grilles responsives qui n’ont besoin d’aucune media query.

auto-fit vs auto-fill

Les deux mots-clés créent autant de colonnes que possible, mais ils traitent l’espace restant différemment. auto-fill conserve des pistes « fantômes » vides, de sorte que vos éléments restent à leur largeur minimale. auto-fit réduit les pistes vides à zéro, laissant les éléments réels s’étirer pour remplir la ligne. Placez les trois mêmes éléments dans chacun et la différence est évidente sur un écran large :

/* Items stretch to fill the row */
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));

/* Empty tracks are preserved; items stay narrow */
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));

Espacement de la grille

gap définit la gouttière entre les pistes. Utilisez le raccourci pour un espacement égal, ou définissez indépendamment les gouttières de ligne et de colonne.

/* Shorthand */
gap: 20px;

/* Individual */
row-gap: 20px;
column-gap: 30px;

Placer des éléments sur la grille

Lignes de grille

Les pistes de grille sont délimitées par des lignes numérotées, commençant à 1 à gauche/en haut. -1 est un raccourci pour la dernière ligne, ainsi grid-column: 1 / -1 s’étend sur toutes les colonnes. Utilisez les numéros de ligne pour faire chevaucher plusieurs pistes à un élément.

.header {
  grid-column: 1 / -1; /* Span all columns */
  grid-row: 1;
}

.sidebar {
  grid-column: 1;
  grid-row: 2 / 4; /* Span rows 2 and 3 */
}

.main {
  grid-column: 2 / -1;
  grid-row: 2;
}

Zones de grille nommées

Pour les mises en page que vous pouvez décrire avec des mots, grid-template-areas vous permet de dessiner la disposition comme de l’art ASCII, puis d’affecter chaque élément à une région nommée. C’est la façon la plus lisible d’exprimer la structure d’une page.

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

Essayez : bac à sable Grid interactif

Lire des articles sur les pistes est une chose — les sentir se mettre en place en est une autre. Cliquez sur une valeur ci-dessous pour réécrire grid-template-columns sur la grille en direct et regardez les huit éléments se réagencer instantanément.

Exemples de mises en page réelles

Grille de cartes (auto-responsive)

La recette Grid la plus utile de toutes : une grille de cartes qui se réagence toute seule, sans point de rupture requis. auto-fill combiné à minmax détermine combien de cartes tiennent par ligne au fur et à mesure que le conteneur se redimensionne.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  padding: 24px;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Mise en page Holy Grail

La coquille d’application classique — en-tête, pied de page, une colonne principale et deux rails latéraux. Les zones nommées en font une déclaration de quatre lignes, et une seule media query la réduit à une colonne unique sur les petits écrans.

.holy-grail {
  display: grid;
  grid-template:
    "header header header" auto
    "nav    main   aside" 1fr
    "footer footer footer" auto
    / 200px 1fr 200px;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .holy-grail {
    grid-template:
      "header" auto
      "nav" auto
      "main" 1fr
      "aside" auto
      "footer" auto
      / 1fr;
  }
}

Mise en page magazine

Les mises en page éditoriales combinent une grande tuile vedette avec des articles plus petits. Étendez la vedette sur deux colonnes et deux lignes, laissez un bloc secondaire s’étaler en largeur et permettez au reste de se placer automatiquement autour d’eux.

.magazine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 200px);
  gap: 16px;
}

.featured {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.secondary {
  grid-column: 3 / 5;
}

Techniques avancées

Alignement

Grid vous offre deux axes de contrôle. justify-* agit le long de la ligne (horizontal), align-* le long de la colonne (vertical). Définissez les valeurs par défaut sur le conteneur avec justify-items/align-items, puis surchargez un élément individuel avec justify-self/align-self.

.container {
  /* Align all items within their cells */
  justify-items: center; /* horizontal */
  align-items: center; /* vertical */

  /* Align the whole grid within the container */
  justify-content: center;
  align-content: center;
}

.item {
  /* Override one item */
  justify-self: end;
  align-self: start;
}

Grille implicite et empilement dense

Lorsque des éléments se placent en dehors de vos pistes explicites, Grid crée des lignes implicites pour les accueillir — dimensionnez-les avec grid-auto-rows. Définissez grid-auto-flow: dense et Grid comble les espaces antérieurs avec des éléments ultérieurs qui s’y adaptent, produisant un empilement serré de type maçonnerie.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Size auto-created rows */
  grid-auto-rows: minmax(100px, auto);
  /* Backfill holes with items that fit */
  grid-auto-flow: dense;
}

Subgrid

Lorsqu’un élément de grille est lui-même une grille, grid-template-columns: subgrid (ou subgrid pour les lignes) permet à l’enfant de réutiliser les lignes de piste du parent au lieu de définir les siennes. C’est la solution la plus propre pour les grilles de cartes où l’en-tête, le corps et le pied de chaque carte doivent s’aligner sur toute la ligne, quelle que soit la longueur du contenu. Subgrid est désormais pris en charge par tous les principaux navigateurs.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* share the parent's row lines */
}

Outils de développement du navigateur

L’inspecteur de grille de votre navigateur transforme ces abstractions en quelque chose de visible :

1. Ouvrez les DevTools (F12, ou Cmd+Opt+I sur macOS).
2. Sélectionnez le conteneur de grille dans le panneau Éléments.
3. Cliquez sur le badge grid situé à côté pour activer la superposition.
4. Activez les numéros de ligne et les noms de zone pour étiqueter chaque piste.

Chrome et Firefox affichent tous deux la superposition en direct, si bien que modifier grid-template-columns dans le panneau Styles met à jour les lignes à mesure que vous tapez — essayez sur n’importe quelle démo de cette page.

Conclusion

CSS Grid simplifie les mises en page complexes. Commencez avec display: grid et un modèle de colonnes, appuyez-vous sur fr et minmax pour un dimensionnement responsive, recourez aux zones nommées lorsqu’une mise en page se lit mieux comme une image, et terminez par l’alignement et l’empilement dense pour les détails. Avec les motifs ci-dessus — et les démos en direct pour expérimenter — vous avez tout ce qu’il faut pour construire des mises en page sophistiquées en toute confiance.

Pour la référence complète des propriétés, gardez le guide CSS Grid Layout de MDN à portée de main pendant que vous pratiquez.

Lectures complémentaires

• Construire une grille de cartes de documentation responsive — mettez auto-fit et minmax() à l’œuvre sur un véritable index de documentation.
• Modèles de formulaires accessibles : libellés, erreurs et états utiles — associez ces mises en page à des formulaires utilisables par tous.
• Intégration de Bootstrap 5 — comment la grille Bootstrap basée sur flexbox du thème complète CSS Grid natif.
• Personnalisation des mises en page — la hiérarchie des mises en page du thème et où s’insèrent vos grilles.