Générateur de grille CSS
Prévisualise les pistes et les espacements de grille et copie le CSS.
Comment utiliser Générateur de grille CSS
CSS grid layout generator writes grid CSS from a column count, row count and gap, and previews numbered cells. Choose 1 to 12 columns and 1 to 12 rows with a 0 to 100 px gap; columns use repeat(n, minmax(0, 1fr)) so they share the width equally, and rows size automatically. Download the rules as a .grid class in grid.css.
- Saisissez les valeurs demandées dans le panneau des paramètres.
- Définissez les colonnes, les lignes et l'espacement (px).
- Lancez le générateur de grille CSS, vérifiez le résultat, puis utilisez les commandes de copie ou de téléchargement disponibles.
Ce que cet outil prend en charge
Prévisualise les pistes et les espacements de grille et copie le CSS.
- Colonnes
- Range: 1 to 12
- Lignes
- Range: 1 to 12
- Espacement (px)
- Range: 0 to 100
Limites et traitement
Les images respectent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images sources sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.
Questions fréquentes
Why does the grid use minmax(0, 1fr) instead of 1fr?
A plain 1fr track has an automatic minimum, so long words or wide content can stretch a column. minmax(0, 1fr) lets columns shrink below their content width, keeping all columns equal. The generator applies it to every column.
Can I make grid columns of different widths with this generator?
No. It produces equal-width columns with repeat() and rows set to auto height. For uneven tracks, copy the CSS and edit grid-template-columns by hand, for example to 2fr 1fr.
What does the grid CSS download contain?
grid.css contains a .grid selector with display: grid, the column and row templates and the gap. Add the class to your container element, or copy just the declarations from the text output into an existing rule.
Où ma saisie est-elle traitée ?
Cette opération traite sa source dans votre navigateur. La copie et le téléchargement sont des actions explicites ; la saisie source n'est enregistrée ni dans un compte ni dans l'historique.
Quelles sont les limites de saisie ?
Les images respectent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images sources sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.