Generatore CSS Grid
Genera codice CSS Grid per layout web configurando colonne, righe e spaziature in pixel con sintassi standard.
Esegui lo strumento
Questo generatore produce codice CSS Grid pronto all'uso per organizzare i contenuti di una pagina web in righe e colonne strutturate. Lo strumento accetta sia valori numerici semplici sia regole di dimensionamento personalizzate, adattando la sintassi in base alle impostazioni selezionate. Se inserisci un numero intero per le colonne, la proprietà risultante applica la funzione repeat con frazioni proporzionali. Per le righe numeriche, la regola imposta automaticamente un'altezza flessibile. Se preferisci misure specifiche in pixel o percentuali, puoi digitare direttamente sequenze su misura come duecento pixel o frazioni miste. I campi dedicati ai distanziatori assegnano lo spazio tra le celle in pixel. Puoi impostare una spaziatura uniforme oppure specificare intervalli distinti per le colonne e per le righe. Il riquadro di output mostra il blocco di stile completo con la dichiarazione di visualizzazione a griglia, le definizioni dei modelli e i margini interni definiti.
Istruzioni
- Imposta il numero o lo schema delle colonne nel relativo campo di testo.
- Definisci la configurazione delle righe indicando un conteggio o una dimensione personalizzata.
- Inserisci la spaziatura generale in pixel tra le celle oppure specifica valori separati per righe e colonne.
- Avvia la generazione per visualizzare il blocco di codice CSS pronto da integrare nel tuo foglio di stile.
Esempi
- Griglia semplice a 3 colonne con righe automatiche e spaziatura di 10 pixel.
- Layout personalizzato con colonne da 200px e 1fr, righe impostate su auto e spaziatura verticale di 15 pixel.
FAQ
Cosa succede se inserisco solo un numero nel campo delle colonne?
Il generatore trasforma il numero nella notazione repeat con unità fr, creando colonne di larghezza proporzionale equivalente.
Posso utilizzare unità di misura diverse per definire le colonne?
Sì, puoi digitare espressioni personalizzate con pixel, percentuali o frazioni; il testo inserito compare direttamente nella proprietà generata.
Come vengono gestiti i valori di spaziatura pari a zero?
Quando un valore di spaziatura è impostato a zero, la corrispondente riga di codice non appare nel risultato finale.