Générateur de CSS Grid

Créez visuellement des mises en page CSS Grid avec des contrôles de colonnes, de lignes et d'espacement — instantanément et gratuitement. Choisissez les unités fr, px, % ou auto pour les colonnes comme pour les lignes. Six préréglages de mise en page offrent des points de départ instantanés. Consultez l'aperçu de la grille avec des cellules numérotées et copiez le CSS prêt pour la production en un clic. Entièrement privé, sans inscription.

CSS Grid Generator

Visual CSS Grid layout builder. Set columns, rows, and gap values with live preview. Choose from layout presets and copy the generated CSS with one click.

Layout Presets

Columns

Column Count3

Column Width1fr

Rows

Row Count3

Auto rows size to fit content

Gaps

Column Gap12px

Row Gap12px

CSS Output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
gap: 12px;

Live Preview

3 × 3 grid9 cellsGap: 12×12px

Pourquoi utiliser notre générateur de CSS Grid ?

Aperçu en direct et CSS instantané : le générateur met à jour l'aperçu en direct et la sortie CSS à chaque changement — aucun bouton à presser. Voyez exactement combien de colonnes, de lignes et de cellules votre grille crée et copiez la déclaration CSS en un clic.
Unités flexibles et préréglages de mise en page : choisissez les unités fr, px, % ou auto pour les colonnes comme pour les lignes. Six préréglages offrent des points de départ instantanés — de simples grilles à 3 colonnes aux mises en page complexes à 12 colonnes et aux configurations avec barre latérale.
100 % privé — sans envoi de fichier : toute la génération de CSS Grid se fait localement dans votre navigateur. Vos choix de mise en page ne quittent jamais votre appareil et ne sont jamais envoyés à un serveur — idéal pour les projets clients et les design systems propriétaires.
Gratuit et sans limite : générez un nombre illimité de mises en page, sans inscription, sans abonnement et sans plafond d'utilisation. Le générateur est entièrement gratuit pour toujours, sans publicité bloquant l'interface.

Cas d'usage courants du générateur de CSS Grid

Mises en page responsives : les web designers utilisent le générateur pour prototyper des mises en page responsives avec des structures de colonnes flexibles. L'unité fr crée des grilles fluides qui s'adaptent à tout écran, tandis que les unités px offrent un contrôle précis pour les barres latérales et en-têtes à largeur fixe.
React et bibliothèques de composants : les développeurs front-end utilisent le générateur pour concevoir des composants basés sur une grille pour React, Vue et Angular. Copiez le CSS exact et intégrez-le dans les styles de composants, styled-components ou les solutions CSS-in-JS.
Passage du design au code : les designers utilisent le générateur pour traduire les mises en page de grille Figma, Sketch ou Adobe XD en code CSS précis pour les développeurs. L'aperçu visuel correspond à la maquette, éliminant les approximations lors du handoff.
Mises en page de templates e-mail : les développeurs d'e-mails utilisent le générateur pour concevoir des mises en page sans tableaux grâce à CSS Grid (pris en charge dans Apple Mail, Outlook.com et Yahoo Mail). Les valeurs de colonnes et d'espacement produisent des structures d'e-mail propres et responsives.
Apprentissage et expérimentation CSS : les apprenants front-end utilisent le générateur pour comprendre comment grid-template-columns, grid-template-rows et gap fonctionnent ensemble. L'aperçu visuel permet de voir facilement l'effet de chaque contrôle sur la grille finale.
Grilles de cartes et galeries : les créateurs de contenu utilisent le générateur pour concevoir des mises en page basées sur des cartes pour les archives de blog, galeries produits, portfolios et widgets de tableau de bord. L'aperçu en direct montre le nombre exact de cellules et l'alignement.

Qu'est-ce que CSS Grid ?

CSS Grid Layout (aussi appelé CSS Grid) est un système de mise en page bidimensionnel qui vous permet de contrôler simultanément les colonnes et les lignes. Contrairement à Flexbox qui est unidimensionnel, Grid peut gérer des mises en page complexes avec des éléments alignés dans les deux directions. Les propriétés clés sont grid-template-columns, grid-template-rows et gap (anciennement grid-gap). Notre générateur crée ces propriétés visuellement et produit du CSS prêt pour la production pour tout navigateur moderne.

Comment fonctionne notre générateur de CSS Grid

Définissez colonnes et lignes : utilisez les curseurs pour fixer le nombre de colonnes (1-12) et de lignes (1-12). Choisissez une unité pour chaque dimension — fr (fraction de l'espace disponible), px (pixels fixes), % (pourcentage du conteneur) ou auto (ajusté au contenu). L'aperçu se met à jour instantanément.
Ajustez les espacements et la largeur/hauteur : définissez indépendamment les espacements de colonne et de ligne avec les curseurs (0-100px). Si vous utilisez les unités fr, px ou %, définissez la taille de piste. L'aperçu affiche des cellules numérotées pour voir combien d'éléments vous pouvez placer.
Copiez le CSS : cliquez sur « Copier le CSS » pour copier la déclaration CSS prête pour la production dans votre presse-papiers. La sortie inclut display: grid, grid-template-columns, grid-template-rows et gap.

Les unités CSS Grid expliquées

fr (unité de fraction) : répartit l'espace disponible proportionnellement entre les colonnes/lignes. 1fr 2fr crée deux colonnes dont la seconde fait le double de la largeur de la première. L'unité fr est le choix le plus courant pour les grilles responsives.
px (pixels) : crée des pistes de taille fixe qui ne changent pas lorsque le conteneur est redimensionné. Utilisez px pour les barres latérales à largeur fixe, les grilles d'icônes et les éléments à taille précise.
% (pourcentage) : crée des pistes dimensionnées en pourcentage de la largeur du conteneur. Notez que les valeurs en pourcentage sont calculées à partir de l'espace disponible après soustraction des espacements.
auto : dimensionne la piste pour s'adapter à son contenu. Les colonnes auto s'étendent à la largeur de l'élément le plus large et les lignes auto à la hauteur de l'élément le plus haut de cette ligne.

Compatibilité navigateurs et bonnes pratiques

CSS Grid est pris en charge par tous les navigateurs modernes (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+) sans préfixe vendeur. Pour de meilleurs résultats, utilisez l'unité fr pour les colonnes responsives et auto pour les lignes qui s'adaptent à la hauteur du contenu. La propriété raccourcie gap accepte une valeur (espacements égaux) ou deux valeurs (ligne colonne), ce que notre générateur gère automatiquement.

Foire aux questions

Un générateur de CSS Grid est un outil visuel qui crée du code de mise en page CSS Grid en vous laissant définir le nombre de colonnes, de lignes et les valeurs d'espacement et en voyant le résultat en direct. Notre générateur prend en charge les unités fr, px, % et auto avec six préréglages. Toute la génération s'exécute dans votre navigateur, sans aucune donnée envoyée à un serveur.

CSS Grid est bidimensionnel et contrôle simultanément les colonnes et les lignes, ce qui le rend idéal pour les mises en page. Flexbox est unidimensionnel pour répartir les éléments sur un seul axe. Utilisez Grid pour les mises en page et Flexbox pour l'alignement des composants.

L'unité fr (fraction) répartit l'espace disponible proportionnellement entre les pistes de la grille. Par exemple, grid-template-columns: 1fr 2fr crée deux colonnes dont la seconde fait le double de la largeur de la première. C'est l'unité la plus courante pour les mises en page de grille responsives.

Oui. Toute la génération de CSS Grid se fait à 100 % côté client, dans votre navigateur. Vos choix de mise en page ne sont jamais envoyés à un serveur, jamais stockés et jamais transmis où que ce soit.

Oui. Il est 100 % gratuit, sans inscription, sans fonctionnalités premium et sans limite d'utilisation. Générez un nombre illimité de mises en page de grille sans restriction.

Notre générateur prend en charge quatre unités : fr (fraction de l'espace disponible), px (pixels fixes), % (pourcentage du conteneur) et auto (ajusté au contenu). Choisissez des unités différentes pour les colonnes et les lignes de manière indépendante.

Utilisez l'unité fr pour les colonnes afin de créer des grilles responsives qui s'adaptent à la largeur du conteneur. Une grille à 3 colonnes avec des colonnes 1fr divise l'espace disponible à parts égales quelle que soit la taille de l'écran.

Oui. Utilisez des valeurs arbitraires dans Tailwind : className="grid grid-cols-[repeat(3,1fr)] gap-4". Toutes les unités (fr, px, %) fonctionnent avec la syntaxe des valeurs arbitraires de Tailwind.