Générateur de grille CSS

Définissez visuellement les colonnes, les lignes et les espaces, puis copiez le code du modèle de grille CSS pour votre mise en page.

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

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

Key capabilities

Définissez visuellement les colonnes, les lignes et les espaces, puis copiez le code du modèle CSS Grid.
S'exécute dans votre navigateur
Utilisation gratuite

Mode d'emploi

Définissez le nombre de colonnes et de lignes.
Ajustez l’écart et le dimensionnement des pistes.
Copiez le CSS de la grille.

How this tool works

Définissez le nombre de colonnes et de lignes.
Ajustez l’écart et le dimensionnement des pistes.
Copiez le CSS de la grille.

Recommended settings

Utilisez d'abord les options par défaut, puis ajustez si nécessaire

Supported formats

Text / on-page input

File size and limits

Les aperçus multicouches très complexes peuvent sembler plus lents sur les téléphones plus anciens.

Privacy

Les générateurs de couleurs et CSS fonctionnent entièrement dans votre navigateur. Les aperçus et les conversions ne téléchargent jamais vos styles.

Common use cases

Utilisez CSS Grid Generator chaque fois que vous en avez besoin : définissez visuellement les colonnes, les lignes et les espaces, puis copiez le code du modèle CSS Grid.

Troubleshooting

L'aperçu est différent après le collage

Vérifiez les CSS concurrents sur votre page (réinitialisations, couleurs héritées). Copiez d'abord la règle générée dans une feuille de style isolée.

FAQ

Est-ce que cela télécharge mon CSS ?

Non. Les générateurs et les convertisseurs s'exécutent dans votre navigateur avec un aperçu en direct.

Ai-je besoin d'un compte ?

Non. Ouvrez l'outil, modifiez les contrôles et copiez le CSS.