Générateur CSS Grid
Générateur CSS Grid gratuit : aperçu live, CSS et Tailwind simultanés, éditeur visuel de grid-template-areas et démo auto-fill vs auto-fit. Sans inscription.
Mis à jour juin 2026
Vérifié par Rafael Duarte
<div class="grid grid-cols-3 grid-rows-2 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>Cliquez sur un élément du canvas pour modifier ses spans de colonne et de ligne.
auto-fill crée autant de tracks que possible et conserve les vides — auto-fit réduit les tracks vides et les éléments s'étirent pour remplir la ligne. Déplacez le curseur pour voir la différence.
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));Comment utiliser le générateur CSS Grid
De la grille vide au code copié en moins d'une minute
1. Choisissez un preset ou définissez les tracks
Holy Grail, Dashboard, Card Grid — ou ajustez les curseurs Colonnes et Lignes.
2. Ajustez les éléments ou les zones nommées
Mode Spans : cliquez sur un élément pour régler col-span/row-span. Mode Zones : saisissez les noms dans la matrice.
3. Copiez le code
Tailwind, CSS, HTML ou Responsive (media queries mobile-first générées automatiquement).
Ce que fait cet outil
Sortie double, éditeur visuel de zones nommées
CSS et Tailwind simultanés
Un générateur de grille qui propose quelque chose qu'aucun autre n'offre sur le même écran.
Éditeur de grid-template-areas
Saisissez des noms directement dans la matrice et le layout se réorganise en direct.
Labo auto-fill vs auto-fit
La partie la plus confuse du CSS Grid, expliquée en pratique avec une démo interactive.
Onglet Responsive
Génère automatiquement des media queries mobile-first à partir de votre configuration.
Alignement avec justify-items et align-items
Ajustez l'alignement des éléments dans les cellules — stretch, start, center ou end — directement dans le panneau, sans écrire de CSS à la main.
Positionnement explicite avec col-start/row-start
Au-delà des spans, définissez la colonne et la ligne exactes où un élément commence — utile pour sauter ou superposer des cellules volontairement.
Exemples
Quand vous allez utiliser ça
Les scénarios les plus courants chez celles et ceux qui utilisent l'outil
Mises en page de site (Holy Grail)
Header, footer et trois colonnes au milieu — le preset génère tout instantanément.
Tableaux de bord (dashboards)
Sidebar fixe plus contenu flexible — les zones nommées gardent le CSS lisible à mesure qu'il grandit.
Galeries de produits/cartes
auto-fill + minmax crée une galerie qui passe de 4 colonnes à 1 sans aucun breakpoint.
Projets Tailwind
L'onglet Tailwind génère grid-cols-*, col-span-* et des valeurs arbitraires prêtes pour React/Vue/Svelte.
Mises en page éditoriales/magazine
Le preset Magazine combine un hero pleine largeur avec des colonnes asymétriques — idéal pour les blogs et les pages de contenu.
Systèmes de grille à 12 colonnes
Le preset 12-Column reproduit la grille classique des frameworks de design, chaque élément occupant une fraction de la largeur totale.
Erreurs courantes
Zones nommées non rectangulaires
Une zone en "L" invalide silencieusement tout le template et le navigateur revient au positionnement automatique.
Confondre fr et %
1fr est une fraction de l'espace restant ; % est une fraction du total — mélanger % et gap provoque un dépassement (overflow).
Span supérieur au nombre de tracks
col-span-4 dans une grille à 3 colonnes force la création d'une quatrième colonne implicite.
Utiliser auto-fit alors que l'objectif était auto-fill
Avec peu d'éléments, auto-fit étire les éléments existants pour remplir toute la ligne — une seule carte peut finir par occuper tout le conteneur sans aucun avertissement.
Pourquoi utiliser cet outil
L'éditeur visuel de grid-template-areas et le labo auto-fill vs auto-fit rendent concrètes les deux parties du CSS Grid qui déroutent le plus les développeurs.
L'onglet Responsive génère automatiquement des media queries mobile-first — vous n'avez pas besoin d'écrire les breakpoints à la main après avoir construit votre layout.
Contrairement à Flexbox, qui organise les éléments dans une seule direction, le CSS Grid contrôle colonnes et lignes en même temps. C'est pourquoi l'outil couvre aussi bien la mise en page entière d'une page que l'alignement fin d'un seul élément, au même endroit.
auto-fill vs. auto-fit
La confusion la plus fréquente du CSS Grid
Questions fréquentes
Les deux créent autant de tracks que possible avec repeat(). Quand les éléments ne remplissent pas la ligne, auto-fill conserve les tracks vides ; auto-fit les réduit et étire les éléments existants.
Références
Article associé
Como criar layouts responsivos sem frameworks (CSS puro em 2026)
Outils connexes
- Vérificateur de Contraste de Couleurs Design Vérificateur de contraste de couleurs gratuit — vérifiez la conformité WCAG 2.2 AA et AAA instantanément. Aperçu en direct, simulation du daltonisme et...
- Convertisseur de Couleurs Design Convertissez des couleurs entre HEX, RVB, HSL et CMJN instantanément. Sélecteur de couleur gratuit avec vérificateur de contraste WCAG et générateur de palette.
- Générateur de Palette de Couleurs Design Générez des palettes de couleurs harmonieuses depuis n'importe quelle couleur de base. Choisissez Analogue, Complémentaire, Triadique ou Tétradique —...
- Palette de Couleurs depuis une Image Design Extrayez des palettes de couleurs de n'importe quelle image — obtenez des codes HEX, RGB, HSL et exportez en CSS variables, Tailwind, JSON ou PNG. 100% dans...
- Générateur CSS Box Shadow — Neumorphisme, Glassmorphisme et Tailwind Design Générateur CSS box shadow gratuit avec aperçu en temps réel. Créez des ombres, effets neumorphisme et glassmorphisme. Exportez en CSS, Tailwind ou variables CSS.
