CSS Grid

Qu’est-ce que CSS Grid ?

CSS Grid est un système de mise en page bidimensionnel intégré à CSS. Il vous permet d’organiser des éléments simultanément en lignes et en colonnes, vous offrant un contrôle total sur la disposition, la taille et l’alignement des éléments sur une page. Avant Grid, les développeurs s’appuyaient sur les floats, les tableaux ou des astuces de positionnement pour créer des mises en page complexes. Grid a remplacé tout cela par un mécanisme unique et puissant.

La distinction clé réside dans les deux dimensions. Flexbox organise les éléments dans une seule direction : soit en ligne, soit en colonne. Grid organise les éléments dans les deux directions à la fois : vous définissez les colonnes et les lignes, puis vous placez les éléments dans les cellules résultantes. Cela en fait le choix naturel pour les mises en page globales, les grilles de cartes, les tableaux de bord et tout design où les éléments doivent s’insérer dans un plan bidimensionnel structuré.

Conteneur Grid et éléments Grid

Pour utiliser Grid, vous devez définir display: grid sur un élément parent. Ce parent devient le conteneur grid, et ses enfants directs deviennent des éléments grid.

/* style.css */
.container {
  display: grid;
}

Une fois que le conteneur est configuré en grid, vous définissez le nombre de colonnes et de lignes, leur largeur, ainsi que la manière dont les éléments y sont placés. Les éléments qui ne sont pas explicitement positionnés sont automatiquement placés par l’algorithme de la grid, en remplissant les cellules vides dans l’ordre.

Colonnes et lignes du template de grille

Les propriétés Grid les plus fondamentales sont grid-template-columns et grid-template-rows. Elles définissent les pistes — les colonnes et les lignes — de votre grille.

/* style.css */
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: auto 1fr auto;
}

• 200px 1fr 2fr crée trois colonnes : une colonne fixe de 200 pixels, puis deux colonnes flexibles qui se partagent l’espace restant selon un ratio de 1 pour 2.
• auto 1fr auto crée trois lignes : la première et la dernière s’adaptent à la taille de leur contenu, tandis que la ligne du milieu s’étire pour remplir la hauteur disponible.

Vous pouvez également utiliser le raccourci grid-template-columns pour tout définir en une seule fois :

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  gap: 1rem;
}

L’unité fr

L’unité fr signifie fraction de l’espace restant. Elle distribue l’espace disponible proportionnellement entre les pistes, une fois que les tailles fixes ont été prises en compte.

/* style.css */
.grid {
  grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
}

/* style.css */
.grid {
  grid-template-columns: 200px 1fr 2fr; /* fixed + two flexible columns */
}

Dans le second exemple, la première colonne occupe 200 pixels, puis le reste est réparti de sorte que la troisième colonne reçoive deux fois plus d’espace que la seconde. L’unité fr est le moyen le plus courant de dimensionner les pistes Grid car elle s’adapte naturellement à la taille du conteneur.

repeat(), auto-fill et auto-fit

Saisir la même valeur plusieurs fois est fastidieux. La fonction repeat() vous permet de répéter un motif de piste (track pattern) :

/* style.css */
.grid {
  grid-template-columns: repeat(4, 1fr); /* four equal columns */
}

auto-fill et auto-fit vont encore plus loin. Ils répètent un motif de piste autant de fois que possible selon l’espace disponible dans le conteneur :

/* style.css */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

• auto-fill crée autant de pistes que possible, même si certaines restent vides.
• auto-fit réduit les pistes vides et étire celles restantes pour remplir l’espace.

En pratique, ils se comportent de manière identique lorsqu’ils sont combinés avec minmax(), le choix n’a donc que rarement d’importance.

minmax()

minmax() définit une plage de taille pour une piste — un minimum et un maximum :

minmax(200px, 1fr)

Cela signifie que la piste aura une largeur minimale de 200 pixels, mais pourra s’étendre jusqu’à 1fr de l’espace restant. Combiné avec auto-fill ou auto-fit, minmax() est le moteur qui permet de créer des grilles responsives s’adaptant sans avoir recours aux media queries.

Grid gap

La propriété gap définit l’espacement entre les éléments de la grille :

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

Vous pouvez définir les espaces entre les lignes et les colonnes indépendamment :

/* style.css */
.grid {
  row-gap: 1rem;
  column-gap: 2rem;
}

Le gap crée uniquement de l’espace entre les éléments, et non autour des bords du conteneur, ce qui est plus propre que d’ajouter des marges aux éléments de la grille.

Lignes de grille et cellules de grille

Les lignes de grille sont les lignes de division horizontales et verticales qui définissent la structure de la grille. Les colonnes sont numérotées de gauche à droite en commençant par 1, et les lignes de haut en bas en commençant par 1. Les espaces entre les lignes sont appelés cellules de grille.

/* style.css */
.item {
  grid-column: 1 / 3; /* spans from line 1 to line 3 (two columns) */
  grid-row: 1 / 2;    /* spans from line 1 to line 2 (one row) */
}

Les lignes peuvent également être négatives : -1 fait référence à la dernière ligne. Comprendre le fonctionnement des lignes est essentiel pour positionner précisément vos éléments.

Placement des éléments de grille

Vous contrôlez la position de chaque élément à l’aide des propriétés de placement :

• grid-column — les colonnes que l’élément occupe.
• grid-row — les lignes que l’élément occupe.
• grid-area — un raccourci pour row-start / column-start / row-end / column-end.

/* style.css */
.header {
  grid-column: 1 / -1; /* span all columns */
  grid-row: 1;
}

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

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

Les éléments qui ne sont pas explicitement placés sont positionnés automatiquement par l’algorithme de la grille, en remplissant les cellules de gauche à droite et de haut en bas.

Zones de grille nommées (Named grid areas)

grid-template-areas vous permet de dessiner votre mise en page à l’aide de chaînes de caractères, en donnant un nom à chaque région :

/* style.css */
.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;
}

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

C’est extrêmement lisible. Vous pouvez visualiser la forme de la mise en page directement dans le CSS, et réorganiser le design est aussi simple que de réécrire la chaîne de zones du template.

Alignement de la grille

Grid propose des contrôles d’alignement puissants qui s’appliquent aussi bien au conteneur qu’aux éléments individuels.

Alignement au niveau du conteneur :

/* style.css */
.grid {
  justify-items: center;  /* align items horizontally within their cell */
  align-items: center;    /* align items vertically within their cell */
  justify-content: center; /* align the grid tracks within the container */
  align-content: center;   /* align the grid tracks vertically within the container */
}

Alignement au niveau de l’élément :

/* style.css */
.item {
  justify-self: end;
  align-self: start;
}

Ces propriétés utilisent les mêmes valeurs que Flexbox — start, end, center, stretch et d’autres — la courbe d’apprentissage est donc très douce si vous maîtrisez déjà l’alignement avec Flexbox.

Motifs CSS Grid courants

Mise en page « Holy Grail » :

/* style.css */
.page {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
}

Grille de cartes responsive :

/* style.css */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

Tableau de bord avec barre latérale fixe :

/* style.css */
.dashboard {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.dashboard-header { grid-column: 1 / -1; }
.dashboard-nav    { grid-area: nav / 1 / -1 / 2; }
.dashboard-main   { grid-area: main / 2 / -1 / 3; }

Contenu en pleine largeur (full-bleed) :

/* style.css */
.content {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
}

.content > * {
  grid-column: 2; /* center text in the narrow column */
}

Grilles responsives sans media queries

L’un des plus grands atouts de Grid est la possibilité de créer des mises en page responsives sans utiliser de media queries. La combinaison de auto-fit + minmax() permet de gérer cela :

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

À mesure que la fenêtre d’affichage rétrécit, les colonnes s’effondrent automatiquement. Lorsqu’elle s’agrandit, de nouvelles colonnes apparaissent. Aucun breakpoint n’est nécessaire. Ce modèle fonctionne pour les grilles de cartes, les galeries d’images, les champs de formulaire et presque tout composant devant s’adapter.

Pour plus de contrôle, vous pouvez ajouter des media queries par-dessus :

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

Quand utiliser Grid vs Flexbox

La réponse courte : Grid pour deux dimensions, Flexbox pour une seule.

• Utilisez Grid lorsque vous avez besoin d’organiser des éléments en lignes et en colonnes — mises en page de pages, tableaux de bord, galeries d’images, grilles de cartes.
• Utilisez Flexbox lorsque vous devez aligner ou distribuer des éléments le long d’un seul axe — barres de navigation, mises en page de formulaires, centrage de contenu, espacement d’éléments sur une ligne.

En pratique, la plupart des projets utilisent les deux. Une page peut utiliser Grid pour la structure globale et Flexbox pour les composants individuels à l’intérieur de ces zones de grille. Ils se complètent au lieu de se concurrencer.

Bonnes pratiques

• Utilisez grid-template-areas pour la mise en page des pages — cela rend le design lisible et facile à réorganiser.
• Privilégiez auto-fit + minmax() pour les grilles de composants responsives plutôt que d’écrire des media queries pour chaque breakpoint.
• Utilisez gap au lieu des marges sur les éléments de grille — cela permet de garder un espacement cohérent et d’éviter les écarts sur les bords.
• Nommez vos zones de grille de manière explicite — header, sidebar, main — et non area1, area2.
• Combinez Grid et Flexbox — Grid pour la structure globale (macro layout), Flexbox pour l’alignement précis (micro alignment) à l’intérieur des composants.
• Évitez de trop utiliser Grid — si une simple ligne Flexbox résout le problème, ne forcez pas l’utilisation de Grid.

Erreurs courantes

• Utiliser grid pour tout alors que Flexbox serait plus simple.
• Oublier que gap remplace les marges — ce qui crée un double espacement entre les éléments.
• Confondre auto-fill et auto-fit lorsque les deux se comportent de la même manière avec minmax().
• Ne pas utiliser de zones de grille nommées (named grid areas), ce qui rend les placements numériques difficiles à maintenir.
• Sur-compliquer les mises en page avec trop de placements explicites alors que le placement automatique fonctionne très bien.
• Penser que Grid ne sert qu’aux mises en page globales — cela fonctionne aussi pour les composants.

Est-ce que CSS Grid vaut la peine d’être appris en 2026 ?

Absolument. CSS Grid est désormais supporté universellement et est devenu l’outil par défaut pour la mise en page sur le web. Chaque framework majeur — React, Vue, Svelte, Astro — génère du HTML stylisé avec du CSS, et maîtriser Grid signifie que vous pouvez construire n’importe quelle mise en page sans lutter contre vos outils. L’époque des hacks avec float et des clearfixes est révolue, et les développeurs qui maîtrisent Grid écrivent des feuilles de style plus propres, plus maintenables et plus responsives. Que vous construisiez une simple landing page ou un tableau de bord complexe, Grid vous offre une précision et une flexibilité qu’aucune autre méthode de mise en page CSS ne peut égaler.

Comment apprendre CSS Grid

Un parcours pratique :

1. Apprenez display: grid, grid-template-columns et grid-template-rows.
2. Comprenez l’unité fr et la manière dont elle distribue l’espace.
3. Entraînez-vous avec auto-fit + minmax() pour créer des grilles responsives.
4. Construisez un layout “Holy Grail” avec grid-template-areas.
5. Apprenez le placement des éléments avec grid-column et grid-row.
6. Explorez les propriétés d’alignement : justify-items, align-items, justify-content, align-content.
7. Réalisez des projets concrets — un tableau de bord, une galerie photo, une page de tarifs — jusqu’à ce que Grid devienne naturel.

À partir de là, combinez Grid avec Flexbox et des techniques responsives pour construire des mises en page complètes et prêtes pour la production. Notre tutoriel CSS interactif vous accompagne à chaque étape avec des exercices pratiques.