Générateur CSS Grid
Générez facilement le code CSS pour vos grilles avec personnalisation des colonnes, lignes et espacements.
Exécuter l’outil
Ce générateur CSS Grid structure rapidement vos mises en page web en créant les règles CSS nécessaires pour vos conteneurs en grille. L'outil accepte des valeurs numériques ou personnalisées pour définir les colonnes et les lignes. Lorsqu'un nombre entier simple est saisi pour les colonnes, le code produit automatiquement une notation avec la fonction de répétition adaptée aux fractions égales. Pour les lignes, la valeur par défaut automatique conserve une hauteur fluide, tandis qu'un entier génère une structure répétée. Vous pouvez également ajuster les espacements généraux ou spécifiques aux axes horizontaux et verticaux, exprimés en pixels. Tout texte personnalisé, comme des largeurs fixes en pixels ou des combinaisons de fractions, est conservé tel quel dans la règle générée. Le bloc CSS obtenu comprend la déclaration d'affichage en grille ainsi que les modèles de colonnes, de rangées et d'espacement configurés, facilitant l'intégration directe dans vos feuilles de style de projet web.
Mode d’emploi
- Indiquez le nombre de colonnes souhaité ou entrez une définition personnalisée de dimensions.
- Définissez la structure des lignes à l'aide d'un nombre entier ou d'une valeur textuelle comme la valeur automatique.
- Renseignez l'espacement global en pixels ou précisez des espacements distincts pour les colonnes et les rangées.
- Copiez le code CSS généré pour l'appliquer directement à votre conteneur HTML.
Exemples
- Grille standard de 3 colonnes avec espacement global : la saisie du chiffre 3 pour les colonnes, de la valeur automatique pour les lignes et d'un espacement de 10 pixels génère une règle avec répétition sur trois fractions et un espacement de 10px.
- Disposition mixte avec colonnes personnalisées : la saisie de 200px 1fr pour les colonnes, de 2 lignes et d'un espacement de colonnes de 20 pixels produit un modèle combinant dimension fixe et fractionnaire avec espacement horizontal dédié.
FAQ
Comment sont interprétées les valeurs numériques simples pour les colonnes ?
Lorsqu'une valeur composée uniquement de chiffres est fournie, elle est convertie en syntaxe de répétition CSS répartissant l'espace en fractions égales.
Peut-on utiliser des unités personnalisées pour la taille des colonnes ?
Oui, vous pouvez renseigner des expressions textuelles complètes comme des mélanges de pixels et de fractions, qui sont conservées telles quelles dans le code final.
Dans quelle unité sont exprimés les espacements de grille ?
Les espacements configurés dans les champs dédiés sont générés en pixels dans la feuille de style finale.
Que se passe-t-il si un champ d'espacement est laissé à zéro ?
Une valeur d'espacement égale à zéro ou laissée vide est simplement ignorée, sans insérer de ligne superflue dans le bloc CSS.