CSS Grid Generator

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

Presets Rapides
Configuration du Layout
Mode
3
2
16px
Tailles de tracks personnalisées
justify-items stretch
align-items stretch
Canvas Interactif
6/12
Code 
<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>
Élément

Cliquez sur un élément du canvas pour modifier ses spans de colonne et de ligne.

Labo Auto-fill vs Auto-fit

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.

3
160px
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
1
2
3

Générateur CSS Grid — Builder Visuel avec Sortie Tailwind et CSS

Construisez n'importe quelle mise en page CSS Grid visuellement — ajustez colonnes, lignes, gap et spans des éléments et regardez la grille se mettre à jour en temps réel. Ce générateur css grid exporte votre layout en CSS pur et en classes Tailwind simultanément, ce qu'aucun autre outil de grid ne propose. Partez d'un preset (Holy Grail, Dashboard, Card Grid) ou d'une grille vierge.

Au-delà des bases, vous disposez d'un éditeur visuel de grid-template-areas pour les layouts nommés, de breakpoints responsives avec media queries mobile-first et d'un laboratoire interactif auto-fill vs auto-fit — la partie la plus déroutante de CSS Grid, enfin expliquée en pratique.

Comment Utiliser le Générateur CSS Grid

D'une grille vierge à un code prêt pour la production en moins d'une minute :

  1. Choisissez un preset ou définissez vos tracks — cliquez sur Holy Grail, Dashboard, Card Grid, Magazine, Mosaic, App Shell ou 12-Column, ou déplacez les curseurs Colonnes et Lignes. Le canvas interactif se met à jour instantanément.
  2. Façonnez vos éléments — en mode Spans, cliquez sur un élément du canvas et ajustez son col-span, row-span et sa position de départ. En mode Zones Nommées, saisissez les noms (header, sidebar, main) directement dans la matrice de l'éditeur : le layout se réorganise en direct.
  3. Affinez les tracks — saisissez des tailles personnalisées comme 200px 1fr minmax(150px, 1fr) pour mélanger colonnes fixes et flexibles ; le canvas et le code reflètent chaque modification.
  4. Copiez le code — basculez entre les onglets Tailwind, CSS, HTML et Responsive puis cliquez sur Copier (ou appuyez sur Shift+Entrée). L'onglet Responsive génère automatiquement des media queries mobile-first.

Exemples du Générateur CSS Grid

Quelques configurations réelles et le code exact produit par le générateur :

Exemple — grille de cards à 3 colonnes :

Config :   3 colonnes, 2 lignes, gap 16px
CSS :      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
Tailwind : grid grid-cols-3 grid-rows-2 gap-4

Exemple — layout Holy Grail (zones nommées) :

Config : colonnes 200px 1fr 200px, zones "header header header" / "sidebar main aside" / "footer footer footer"
CSS :    grid-template-areas: "header header header" "sidebar main aside" "footer footer footer";
         .header { grid-area: header; } …

Exemple — élément sur 2 colonnes :

Config :   élément 1 avec col-span 2
CSS :      .item-1 { grid-column: span 2; }
Tailwind : <div class="col-span-2">1</div>

Exemple — tracks personnalisés avec minmax (cas particulier) :

Config :   grid-template-columns: 200px 1fr minmax(150px, 1fr)
Tailwind : grid-cols-[200px_1fr_minmax(150px,1fr)]   ← valeur arbitraire, générée automatiquement

Exemple — cellule vide dans les zones nommées (cas particulier) :

Config : laissez une cellule vide dans l'éditeur de zones
Sortie : grid-template-areas: "header header" ". main"   ← le point est une cellule vide valide

CSS Grid — Qu'est-ce que c'est et pourquoi c'est important

CSS Grid Layout est un système de mise en page bidimensionnel qui contrôle colonnes et lignes simultanément. Contrairement à Flexbox, unidimensionnel (une ligne OU une colonne), Grid place les éléments sur les deux axes à la fois — idéal pour les layouts de page, les dashboards, les grilles de cards et toute interface où les éléments doivent s'aligner horizontalement et verticalement.

L'unité fr est le superpouvoir de Grid : elle représente une fraction de l'espace restant après le placement des tracks fixes. grid-template-columns: 200px 1fr 1fr dans un conteneur de 800px donne une sidebar de 200px et deux colonnes de 300px — sans calcul de pourcentages. Combinée à minmax() et repeat(auto-fill, …), elle permet des grilles entièrement responsives sans écrire la moindre media query.

Cas d'Usage Courants

  • Layouts de page (Holy Grail) : header, footer et trois colonnes au centre en six lignes de CSS — un layout qui exigeait autrefois des hacks avec float. Le preset Holy Grail le génère instantanément.
  • Dashboards : sidebar fixe plus zone de contenu flexible avec emplacements stats et widgets. Les zones nommées gardent le CSS lisible à mesure que le dashboard grandit.
  • Galeries de produits/cards : repeat(auto-fill, minmax(250px, 1fr)) crée une galerie qui passe de 4 colonnes à 1 quand le viewport rétrécit — zéro breakpoint.
  • Projets Tailwind : l'onglet Tailwind produit grid-cols-*, col-span-* et des valeurs arbitraires comme grid-cols-[200px_1fr], prêtes à coller dans un composant React, Vue ou Svelte.
  • Layouts éditoriaux/magazine : combinez un hero pleine largeur avec des colonnes d'articles asymétriques grâce au preset Magazine, puis ajustez les spans bloc par bloc.

Erreurs Courantes avec CSS Grid

  • Utiliser auto-fit alors qu'il fallait auto-fill : avec peu d'éléments, auto-fit les étire sur toute la ligne — une seule card peut occuper tout le conteneur. Utilisez le laboratoire sous le canvas pour comparer avant de trancher.
  • Zones nommées non rectangulaires : grid-template-areas exige que chaque zone forme un rectangle. Une zone en « L » invalide silencieusement tout le template et le navigateur retombe sur le placement automatique.
  • Confondre fr et % : 1fr est une part de l'espace restant, tandis que 33% est une part du conteneur total — les pourcentages combinés à un gap provoquent un overflow ; fr déduit les gaps automatiquement.
  • Spans supérieurs au nombre de tracks : un élément avec col-span-4 dans une grille de 3 colonnes force une quatrième colonne implicite. Le générateur plafonne les spans au nombre de colonnes dans l'aperçu pour rendre cela visible.

Foire Aux Questions

Quelle est la différence entre auto-fill et auto-fit en CSS Grid ?

Les deux créent autant de tracks que le conteneur peut en contenir avec repeat(). La différence apparaît quand les éléments ne remplissent pas la ligne : auto-fill conserve les tracks vides et garde des tailles cohérentes, tandis qu'auto-fit réduit les tracks vides à zéro et les éléments existants s'étirent pour remplir l'espace. Utilisez auto-fit pour les galeries qui doivent toujours occuper toute la largeur ; auto-fill quand la cohérence des tailles prime.

Qu'est-ce que l'unité fr en CSS Grid ?

L'unité fr (fraction) représente une fraction de l'espace disponible après le placement des tracks de taille fixe. Par exemple, grid-template-columns: 200px 1fr 1fr dans un conteneur de 800px donne 200px, 300px et 300px. Contrairement aux pourcentages, fr opère sur l'espace restant et tient compte des gaps — plus fiable quand on mélange tracks fixes et flexibles.

Comment créer une grille responsive sans media queries ?

Utilisez grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). Cela crée autant de colonnes d'au moins 250px que le conteneur peut en contenir et ajuste automatiquement leur nombre quand le viewport change — 4 colonnes sur desktop, 2 sur tablette, 1 sur mobile, sans aucune media query. Le laboratoire auto-fill vs auto-fit de ce générateur permet de tester le motif en direct.

Comment fonctionne grid-template-areas ?

La propriété définit le layout comme une carte textuelle visuelle : chaque chaîne entre guillemets est une ligne, chaque mot une zone nommée, et le point (.) marque une cellule vide. Les éléments sont assignés avec grid-area: nom. La contrainte : chaque zone doit être rectangulaire — répétez le nom sur plusieurs cellules pour qu'une zone couvre plusieurs colonnes ou lignes. Le mode Zones Nommées de ce générateur construit le template au fur et à mesure de la saisie.

Puis-je exporter la grille en classes Tailwind ?

Oui — l'onglet Tailwind convertit votre configuration en classes utilitaires en temps réel : grid-cols-3, gap-4, col-span-2, etc. Les tracks personnalisés deviennent des valeurs arbitraires comme grid-cols-[200px_1fr_200px], et les zones nommées utilisent la syntaxe de propriété arbitraire de Tailwind ([grid-area:header]) — même les layouts complexes fonctionnent sans toucher à votre configuration Tailwind.

Ressources

Outils connexes