Come generare una griglia CSS con colonne, righe e gap

Inserisci colonne, righe e spaziature, quindi genera il CSS. I numeri ricevono una sintassi repeat, mentre i testi personalizzati vengono mantenuti e i gap numerici sono espressi in px.

A cosa serve il generatore di griglie CSS

Questo generatore crea codice CSS per una griglia Grid partendo da impostazioni facoltative per colonne, righe e spaziature. È utile quando vuoi definire rapidamente una struttura di layout senza scrivere da zero le dichiarazioni principali. Il risultato include display: grid e dichiarazioni separate per il modello delle colonne e quello delle righe.

Come generare il CSS della griglia

1. Inserisci il numero di colonne oppure una definizione testuale. Un valore numerico composto da cifre, come 3, viene trasformato in una forma repeat(3, 1fr). Se invece inserisci testo come 200px 1fr o 1fr 1fr 1fr, questa definizione viene mantenuta.

2. Imposta le righe. Il valore predefinito è auto. Un numero composto da cifre diverso da auto, per esempio 2, viene trasformato in repeat(2, auto). Gli altri testi per le righe vengono mantenuti così come sono.

3. Inserisci il gap generale, se vuoi applicare la stessa spaziatura alla griglia. I valori valorizzati vengono riportati con l’unità px; un valore non valorizzato non produce la dichiarazione generale gap.

4. Se necessario, compila separatamente la spaziatura tra colonne e quella tra righe. Anche queste impostazioni vengono aggiunte con px solo quando hanno un valore valorizzato; se una delle due è a zero o non valorizzata, la relativa dichiarazione viene omessa.

5. Avvia la generazione e controlla il CSS restituito. Per una configurazione rapida puoi anche lasciare vuoti i campi facoltativi: i valori predefiniti sono 3 colonne, righe auto, gap 10, gap tra colonne 0 e gap tra righe 0.

Come leggere il CSS generato

Nel risultato cerca innanzitutto display: grid, poi verifica le dichiarazioni del modello delle colonne e delle righe. Un numero di colonne viene rappresentato con repeat e 1fr, mentre un numero di righe viene rappresentato con repeat e auto. Le definizioni testuali personalizzate non vengono riscritte secondo questa trasformazione.

Controlla anche la presenza delle spaziature: il gap generale compare soltanto con un valore valorizzato e usa px. I gap distinti per colonne e righe seguono la stessa regola. Di conseguenza, impostare un valore generale e lasciare a zero i due valori individuali produce una dichiarazione generale, senza dichiarazioni separate per le singole direzioni.

Ricorda che colonne e righe vengono convertite in testo prima di essere interpretate. Solo i valori composti da cifre ricevono la trasformazione documentata; gli altri testi vengono mantenuti e non devono essere considerati espressioni arbitrarie verificate o corrette dal generatore.

Esempio pratico

Devi creare una griglia con tre colonne flessibili, righe automatiche e una spaziatura uniforme di 16 pixel.

Imposta le colonne su 3, lascia le righe su auto, inserisci 16 nel gap generale e lascia a 0 il gap tra colonne e quello tra righe, quindi genera il CSS.

Il risultato contiene display: grid, una dichiarazione grid-template-columns: repeat(3, 1fr), una dichiarazione delle righe con auto e una dichiarazione gap: 16px; i gap individuali restano assenti perché impostati a zero.

Limiti

• La trasformazione speciale riguarda soltanto valori composti da cifre per colonne e righe. Gli altri testi vengono mantenuti; non è documentata una validazione generale delle espressioni CSS.
• I gap numerici generati usano px; i valori non valorizzati non producono le relative dichiarazioni.

Errori comuni

• Se una spaziatura non compare nel CSS, controlla che il relativo campo abbia un valore valorizzato: gli input a zero o non valorizzati vengono omessi, e le spaziature numeriche usano px.

Domande frequenti

Posso usare un numero per definire colonne e righe?

Sì, puoi inserire un numero composto da cifre, come 3: per le colonne viene prodotto repeat(3, 1fr), mentre per le righe viene prodotto repeat(3, auto) se il valore non è auto.

Posso inserire una definizione personalizzata?

Sì, puoi usare definizioni come 200px 1fr per le colonne o un testo diverso da auto per le righe; questi valori testuali vengono mantenuti. Non è documentata una verifica generale delle espressioni inserite.

Come vengono gestiti i gap?

Sì, ma la dichiarazione generale gap viene emessa solo con un valore valorizzato. I valori per gap tra colonne e tra righe sono emessi separatamente alle stesse condizioni e usano px.