# Generatore di layout griglia CSS

> Anteprima delle tracce e dei gap della griglia, con copia del CSS.

[Open tool](https://www.toolcabana.com/it/css-grid-layout-generator) · [Design e CSS](https://www.toolcabana.com/it/category/design-and-css)

Tool ID: css-grid-layout-generator. Requested language: it. Description language: it. Complete guide translation: yes.

## Overview (en)

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.

## Supported tasks (it)

Anteprima delle tracce e dei gap della griglia, con copia del CSS.

## Steps (it)

1. Inserisci i valori richiesti nel pannello delle impostazioni.
2. Imposta colonne, righe e gap (px).
3. Esegui Generatore di layout griglia CSS, esamina il risultato, poi usa i controlli disponibili per copiare o scaricare.

## Settings

- Colonne (it; key: columns; type: number); minimum: 1; maximum: 12
- Righe (it; key: rows; type: number); minimum: 1; maximum: 12
- Gap (px) (it; key: gap; type: number); minimum: 0; maximum: 100

## Limitations (it)

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.

## Privacy and connections (it)

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.

## Questions (it)

### 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.

## Related tools

- [CSS clamp calculator](https://www.toolcabana.com/it/css-clamp-calculator)
- [CSS flexbox playground](https://www.toolcabana.com/it/css-flexbox-playground)
- [CSS cubic Bezier editor](https://www.toolcabana.com/it/css-cubic-bezier-editor)
- [CSS clip-path maker](https://www.toolcabana.com/it/css-clip-path-maker)