Générateur de CSS Grid

Ajustez grid-template-columns/rows, justify-items, align-items et gap via une interface graphique interactive et prévisualisez de vraies mises en page CSS Grid en temps réel. Copiez le CSS généré en un clic.

Dernière mise à jour : 2026-09-20

Bâtir une disposition CSS Grid à la main

CSS Grid est la méthode de disposition à deux dimensions, qui prend en charge lignes et colonnes à la fois. Cet outil vous laisse changer `grid-template-columns` et `rows`, `justify-items`, `align-items` et `gap` à l'écran, confirmer le résultat à mesure, et recopier le CSS obtenu.

**Trancher entre celui-ci et Flexbox est aisé si l'on raisonne en un ou deux axes.** Pour ranger des éléments sur une seule ligne, Flexbox suffit ; **pour une disposition où lignes et colonnes doivent s'aligner de concert, Grid convient mieux.** La force propre de Grid est l'unité `fr`, qui exprime une part de l'espace restant : écrivez `1fr 2fr` et la largeur qui reste se partage un pour deux. **L'autre chose à retenir est la forme `repeat(auto-fit, minmax(200px, 1fr))`.** Elle seule livre **une disposition dont le nombre de colonnes croît et décroît avec la largeur, sans une seule requête de média.**

Comment s'en servir

Partez d'un préréglage Les dispositions courantes — trois colonnes, en-tête avec barre latérale — sont à portée de main.
Modifiez les définitions de colonnes et de lignes **`fr` permet de partager l'espace restant selon un rapport.**
Essayez les propriétés d'alignement `justify-items` et `align-items` règlent la façon dont le contenu se place dans chaque cellule.
Recopiez le CSS produit Dès que la disposition vous convient, elle se colle telle quelle dans votre code.

Astuces pour en tirer le meilleur parti

L'unité fr dans grid-template-columns: repeat(3, 1fr) représente une part de l'espace restant, si bien que le rapport entre les colonnes reste constant même si la largeur de la fenêtre change.
La propriété gap n'affecte que l'espacement entre les lignes et les colonnes, contrairement à margin qui affecte aussi l'extérieur de la grille. Vous pouvez aussi définir row-gap et column-gap séparément.
Les pistes définies sur "auto" s'adaptent à la taille réelle de leur contenu, ce qui est pratique pour des colonnes ou des lignes dont la longueur du contenu est imprévisible.
En surchargeant grid-column: span 2 sur un seul élément, vous pouvez faire en sorte que seul l'en-tête ou le pied de page s'étende sur toute la largeur de la grille.
Utilisez Grid lorsque vous avez besoin d'une mise en page bidimensionnelle complète, et Flexbox lorsqu'une seule ligne ou colonne d'éléments suffit (voir aussi notre générateur de CSS Flexbox).

Dans quels cas s'en servir

Pour bâtir la charpente d'une page entière

**Placer en-tête, barre latérale, corps et pied est précisément ce en quoi Grid excelle.**

Pour ranger des cartes en damier

**Associer `auto-fit` à `minmax` fait varier le nombre de colonnes avec la largeur de l'écran.**

Pour aligner un formulaire

Aligner les colonnes d'étiquettes et de champs laisse la verticale courir droit et se lit bien mieux.

Pour apprendre Grid

Changer une valeur et regarder le résultat éclaire la façon dont lignes et colonnes s'établissent.

Vocabulaire de CSS Grid

Conteneur de grille: L'élément parent auquel on donne `display: grid`. C'est en son sein que se définissent lignes et colonnes.
Fr: **L'unité qui exprime une part de l'espace restant.** Avec `1fr 2fr`, la largeur qui reste se partage un pour deux.
Grid-template-columns: Définit la suite et les largeurs des colonnes. `repeat()` épargne de réécrire la même valeur.
Minmax: La fonction énonçant un minimum et un maximum. **`minmax(200px, 1fr)` signifie « assure 200 pixels et grandis s'il y a de la place ».**
Auto-fit: Le mot-clé qui crée autant de colonnes qu'il en tient. **Associé à `minmax`, il replie sans aucune requête de média.**
Gap: L'espace laissé entre lignes et colonnes. Les deux directions se règlent séparément.

Questions fréquentes

Utilisez CSS Grid lorsque vous devez contrôler à la fois les lignes et les colonnes, comme pour l'ossature générale d'une page ou un tableau de bord. Utilisez Flexbox lorsqu'une seule direction (une ligne ou une colonne) d'éléments suffit, comme une barre de navigation ou une rangée de cartes. De nombreuses pages combinent les deux : Grid pour l'ossature générale, Flexbox à l'intérieur des composants.

fr signifie "fraction" et représente une part de l'espace restant à l'intérieur du conteneur. Par exemple, grid-template-columns: 1fr 2fr répartit l'espace de sorte que la deuxième colonne soit deux fois plus large que la première. Contrairement à une unité absolue comme px, les pistes en fr conservent leur rapport lorsque le conteneur change de taille.

repeat() est une notation abrégée permettant de répéter le même motif de piste plusieurs fois, si bien que repeat(3, 1fr) équivaut à écrire grid-template-columns: 1fr 1fr 1fr. Cette écriture reste concise même lorsque le nombre de colonnes est important ou change dynamiquement, puisqu'il suffit d'indiquer le nombre de répétitions et la taille de la piste.

La mise en page "holy grail" (saint graal) est une structure de page web classique combinant un en-tête, une barre latérale, un contenu principal et un pied de page. Avant CSS Grid, elle nécessitait des contournements complexes à base de float ou de balises de tableau, mais des propriétés comme grid-template-areas permettent de la reproduire en seulement quelques lignes de CSS.

grid-column: span N fait qu'un élément s'étend horizontalement sur N pistes (colonnes). Par exemple, attribuer grid-column: span 3 uniquement à l'élément d'en-tête lui permet d'occuper toute la largeur d'une grille à 3 colonnes, tandis que les autres éléments restent dans leurs cellules normales (grid-row accepte la même syntaxe span).

Anecdote — la "seconde dimension" que CSS Grid vise et que Flexbox ne couvre pas

CSS Grid Layout a été conçu comme un système de mise en page bidimensionnel permettant de définir simultanément des lignes et des colonnes, contrairement à Flexbox, qui se concentre sur l'agencement d'éléments dans une seule direction. Sa normalisation au sein du W3C a débuté vers 2011, et lorsque Chrome, Firefox, Safari et Edge ont implémenté sa prise en charge quasi simultanément en 2017, son adoption dans des projets réels s'est rapidement accélérée.

Avant l'existence de Grid, organiser une page selon la structure classique "holy grail" — en-tête, barre latérale, contenu principal et pied de page — nécessitait des contournements complexes reposant sur float ou des balises de tableau. CSS Grid a introduit des propriétés déclaratives telles que grid-template-columns, grid-template-rows et grid-template-areas, permettant de recréer cette mise en page familière en seulement quelques lignes de CSS.

Aujourd'hui, une grande partie du travail de conception derrière les interfaces de tableau de bord, les galeries d'images et les mises en page façon magazine, organisées autour de lignes et de colonnes, est réalisée avec CSS Grid. La prise en charge de "subgrid", qui permet à une grille imbriquée d'hériter du dimensionnement des pistes de sa grille parente, s'est également répandue dans les principaux navigateurs, facilitant le maintien de la cohérence dans des mises en page complexes à plusieurs niveaux.

En pratique, une convention s'est imposée : Grid gère l'ossature générale de la page, tandis que Flexbox gère l'agencement des éléments à l'intérieur de chaque composant. Les deux ne sont pas des technologies concurrentes, mais des outils complémentaires, chacun adapté à une force différente (alignement unidimensionnel contre placement bidimensionnel en grille), et les combiner au sein d'une même page est considéré comme une pratique standard.

Voir toutes les anecdotes