Générateur de CSS Grid visuel en ligne
Générez du CSS Grid visuellement (colonnes, lignes, espacement), directement dans le navigateur.
1fr = fraction égale de l’espace. Adaptez à vos besoins (px, %, auto…).
🔒 100 % côté client — aucune donnée envoyée
Créez visuellement votre grille CSS Grid en définissant colonnes, lignes et gap, puis copiez le code généré. L'aperçu est mis à jour en direct, 100% dans votre navigateur, sans inscription. Idéal pour prototyper des mises en page complexes sans écrire tout le CSS à la main.
À quoi ça sert ?
- ▸ Définir une grille de colonnes et de lignes avec grid-template
- ▸ Régler l'espacement entre les cellules avec la propriété gap
- ▸ Prototyper une galerie ou un tableau de bord en CSS Grid
- ▸ Apprendre CSS Grid en visualisant l'effet de chaque réglage
FAQ
Comment créer une grille responsive en CSS Grid ?
Définissez vos colonnes avec des unités flexibles comme fr et minmax dans le générateur ; il produit le grid-template-columns correspondant que vous copiez dans votre CSS.
Faut-il utiliser CSS Grid ou Flexbox ?
Grid convient aux mises en page en deux dimensions (colonnes et lignes) tandis que Flexbox est idéal pour un alignement sur un seul axe ; ils sont souvent combinés.
À quoi sert la propriété gap dans une grille ?
La propriété gap définit l'espace entre les colonnes et les lignes de la grille sans ajouter de marge sur les bords ; l'aperçu vous montre le rendu en temps réel.