Générateur de CSS Grid
Éditeur CSS Grid visuel avec lignes × colonnes (toute valeur de piste : fr, px, %, auto, minmax, repeat), espacements de lignes et de colonnes indépendants, zones de grille nommées avec clic pour peindre, justify/align pour les items et le contenu, 6 modèles prêts à l'emploi et aperçu en direct. Sortie en CSS pur (avec sélecteurs .area) ou en classe Tailwind à valeur arbitraire.
Everything runs in your browser. Nothing is uploaded.
Comment utiliser ce générateur de css grid
- Choisissez un modèle (12 colonnes, Holy Grail, Dashboard, Bento, Gallery, Card row) ou définissez vous-même lignes + colonnes.
- Modifiez chaque piste avec une valeur CSS valide : 1fr, 200px, minmax(120px, 1fr), repeat(auto-fill, minmax(180px, 1fr)).
- Ajustez l'espacement des lignes/colonnes avec les curseurs.
- Activez « zones de grille nommées » pour peindre les cellules avec des noms de zone — choisissez une couleur et cliquez sur les cellules.
- Réglez justify/align pour les items et le contenu, puis copiez le CSS ou le Tailwind résultant.
Questions fréquentes
Qu'est-ce que grid-template-areas ?
Une méthode pour mettre en page une grille en donnant un nom à chaque cellule, puis en assignant ces noms aux éléments enfants via `grid-area`. Idéal pour header/sidebar/main/footer.
Quelle est la différence entre fr, auto et minmax ?
`fr` répartit l'espace restant entre les pistes. `auto` s'ajuste au contenu. `minmax(min, max)` limite une piste entre deux valeurs — combiné à `repeat(auto-fill, ...)`, cela produit des grilles responsives.
La sortie Tailwind couvre-t-elle tout ?
Au mieux : les motifs simples (grid-cols-N, gap, items-X) utilisent les classes intégrées ; les pistes complexes retombent sur des sélecteurs à valeur arbitraire.
Pourquoi `gap` ne fonctionne-t-il pas dans ma grille sur un ancien Safari ?
`gap` pour CSS Grid est pris en charge depuis Safari 10.1 (2017), `gap` pour Flexbox depuis Safari 14.1 (2021). Si vous supportez iOS 13 ou antérieur, utilisez `grid-row-gap` et `grid-column-gap` à la place (fonctionnent depuis Safari 10), et des marges sur les enfants flex au lieu de `gap`.