Generatore di layout griglia CSS
Anteprima delle tracce e dei gap della griglia, con copia del CSS.
Come usare Generatore di layout griglia 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.
- Inserisci i valori richiesti nel pannello delle impostazioni.
- Imposta colonne, righe e gap (px).
- Esegui Generatore di layout griglia CSS, esamina il risultato, poi usa i controlli disponibili per copiare o scaricare.
Cosa supporta questo strumento
Anteprima delle tracce e dei gap della griglia, con copia del CSS.
- Colonne
- Range: 1 to 12
- Righe
- Range: 1 to 12
- Gap (px)
- Range: 0 to 100
Limiti ed elaborazione
Le immagini usano il limite esistente della canvas di 32 megapixel. Dove supportato sono consentite fino a 100 immagini di origine. L'HTML incollato è limitato a 200.000 caratteri; i diagrammi Mermaid a 20.000 caratteri e 300 righe. La generazione di SVG e PNG richiede un browser.
Domande frequenti
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.
Dove viene elaborato il mio input?
Questa operazione elabora i dati di origine nel tuo browser. Copia e download sono azioni esplicite; l'input di origine non viene salvato in un account né in una cronologia.
Quali sono i limiti di input?
Le immagini usano il limite esistente della canvas di 32 megapixel. Dove supportato sono consentite fino a 100 immagini di origine. L'HTML incollato è limitato a 200.000 caratteri; i diagrammi Mermaid a 20.000 caratteri e 300 righe. La generazione di SVG e PNG richiede un browser.