Générateur de Grille
Générez un système de grille CSS personnalisé selon vos besoins.
Réglages
Résultat
À propos de l'outil
Ce générateur crée le code d’une grille responsive dont le nombre de colonnes change selon la taille d’écran. Il convient pour une liste de cartes, une galerie de produits ou un tableau de bord. Vous fixez de 1 à 12 colonnes pour le mobile, la tablette et le bureau, un espacement en pixels, et un conteneur limité à 1000 px ou en pleine largeur.
Le code est disponible en trois variantes. En Tailwind CSS, vous obtenez des classes grid-cols avec les préfixes md et lg. En Bootstrap, des classes row-cols, limitées à six colonnes par le framework, et un espacement réglé par les variables de gouttière. En CSS, une feuille avec deux media queries, à 768 et 1024 px, accompagnée d’un exemple de HTML.
Comment l'utiliser
- Dans Sélectionner le Framework, choisissez Tailwind CSS, Bootstrap ou CSS, puis la Taille du Conteneur.
- Renseignez les Colonnes pour Mobile, Colonnes pour Tablette et Colonnes pour Bureau, puis l’Espacement (en pixels).
- Utilisez les boutons Mobile, Tablette et Bureau du Résultat pour vérifier chaque disposition.
- Cliquez sur Générer la Grille, puis sur Copier le Code CSS, ou sur Copier le Code HTML en mode CSS.
Questions fréquentes
Quels points de rupture sont utilisés ?
La version CSS change de disposition à partir de 768 px pour la tablette et de 1024 px pour le bureau. Les versions Tailwind CSS et Bootstrap s’appuient sur les préfixes md et lg de chaque framework.
Pourquoi Bootstrap est-il limité à six colonnes ?
Les classes row-cols de Bootstrap ne vont que de 1 à 6. Si vous demandez davantage de colonnes, l’outil ramène la valeur à six et ajoute un commentaire dans le code pour le signaler.
L’outil génère-t-il aussi le HTML ?
En mode CSS, oui : un conteneur, la grille et trois éléments d’exemple, à copier séparément. En Tailwind CSS et en Bootstrap, le code fourni est déjà du HTML avec les classes, à compléter avec vos propres éléments.
Mes réglages sont-ils envoyés quelque part ?
Non. Le code est produit dans votre navigateur, sans appel réseau. Le framework, les colonnes, l’espacement et la taille du conteneur sont seulement mémorisés dans le stockage local du navigateur.