Générateur CSS Grid
Réglez colonnes, lignes et espacements avec des curseurs et voyez le résultat en direct. Copiez le CSS et le HTML prêts à coller dans votre projet.
Traité à 100 % dans votre navigateur
CSS
HTML
Ctrl + Enter exécuterCtrl + C copier le résultat
Comment l’utiliser
- 1Réglez le nombre de colonnes et de lignes.
- 2Définissez l’espace entre colonnes et lignes.
- 3Choisissez la largeur des colonnes : égales, fixes, automatique ou adaptative.
- 4Copiez le CSS et le HTML générés.
Cas d’usage
- Créer une galerie de cartes qui s’adapte à la largeur d’écran.
- Monter le squelette d’un tableau de bord.
- Comprendre le fonctionnement de grid-template-columns et gap.
- Prototyper rapidement des mises en page avant de coder.
Questions fréquentes
Qu’est-ce que CSS Grid ?
Un système de mise en page CSS bidimensionnel qui organise les éléments en lignes et colonnes.
Que fait auto-fit avec minmax ?
Il crée autant de colonnes que possible à largeur minimale et les étire pour remplir l’espace : idéal pour des mises en page adaptatives sans media queries.
Que signifie 1fr ?
Une fraction de l’espace disponible. Trois colonnes de 1fr se partagent la largeur à parts égales.
Cela fonctionne-t-il sur tous les navigateurs ?
Oui, CSS Grid est pris en charge par tous les navigateurs modernes.