⭐ 0
🔍
Testo Immagine PDF e Documenti Audio Musica Elettronica Tempo Utilità Validatori Esoterismo Giochi

Generatore CSS Grid

Progetta layout CSS Grid in modo visivo: imposta colonne, righe e spaziatura, poi digita i nomi delle aree nelle celle per costruire grid-template-areas — con anteprima dal vivo e codice CSS e HTML pronto da copiare.

🔒 Elaborato interamente nel tuo browser: nulla di ciò che inserisci qui verrà mai caricato.

Digita un nome in qualsiasi cella qui sotto; le celle con lo stesso nome si fondono in una regione grid-template-areas.

Elaborazione... 0%

Risultato

Una dichiarazione grid-template-areas è uno dei pezzi di CSS più leggibili che esistano, ma solo una volta che c’è — arrivarci a mano significa contare stringhe tra virgolette e far corrispondere le lunghezze delle righe, e una sola cella fuori posto rompe silenziosamente l’intero layout. Questo generatore trasforma tutto ciò in manipolazione diretta: imposta il numero di colonne e righe, digita un nome in una cella della griglia dal vivo e i nomi corrispondenti si uniscono automaticamente in un’area con nome.

Sotto il cofano, ogni cella che lasci vuota diventa un punto nella stringa grid-template-areas generata, e ogni cella a cui dai un nome diventa parte del rettangolo di quel nome. I CSS permettono a un’area con nome di occupare un solo blocco rettangolare pulito, quindi lo strumento lo verifica mentre scrivi e ti dice esattamente quando un nome non sta ancora formando un rettangolo valido — invece di produrre in silenzio CSS che il browser rifiuterebbe.

Lo spazio tra colonne e tra righe predefinito è di 8px e si unisce in un’unica riga gap quando coincidono, e l’anteprima dal vivo della griglia rispecchia sempre le tue tracce grid-template-columns e grid-template-rows, incluse le colonne in pixel fissi di una preimpostazione come le guide laterali da 200px dell’holy grail. L’output copiabile copre entrambi i lati: un blocco CSS pronto per il tuo foglio di stile e uno scheletro HTML corrispondente con un div grid-area per ogni area con nome.

Grid e flexbox risolvono problemi di layout diversi, e il css-flexbox-generator su questo sito è il punto di partenza migliore per layout unidimensionali — una singola riga o colonna di elementi flessibili come una barra di navigazione o una pila di schede. Usa invece questo generatore di griglie quando hai bisogno di un controllo bidimensionale, righe e colonne esplicite, o aree con nome come intestazione/nav/principale/footer; i due strumenti finiscono spesso sulla stessa pagina, grid per l’involucro della pagina e flexbox al suo interno. Come ogni strumento su questo sito, funziona interamente nel tuo browser — senza caricamenti, senza account.

Ti piace questo strumento? Pensi che questo prodotto sia utile? Ne vedi il potenziale e vuoi supportarlo?

🛡️
Eseguito nel Browser

I tuoi file e input non lasciano mai questo dispositivo. L'elaborazione avviene completamente offline. Sicuro al 100%.

Formati accettati e regole

  • Campi numerici per 1–6 colonne e righe, più controlli separati per lo spazio tra colonne e tra righe che si uniscono in un unico valore gap quando coincidono.
  • Modalità aree con nome: digita il nome di un’area direttamente in una cella della griglia dal vivo; lo strumento genera una stringa grid-template-areas valida e avvisa quando i nomi non formano rettangoli puliti.
  • Blocco CSS copiabile (display: grid, grid-template-columns/rows, gap, grid-template-areas) più uno scheletro HTML corrispondente con un div grid-area per ogni area con nome.

Vantaggi principali

✓ Digita un nome direttamente in una cella e le celle con lo stesso nome si uniscono automaticamente in un’area grid-template-areas — senza selezioni a trascinamento e senza dover scrivere a mano la sintassi con le virgolette.
✓ L’anteprima dal vivo ridimensiona e ricolora la griglia a ogni modifica, così vedi esattamente le tracce di colonne e righe e ogni area con nome prima di copiare anche una sola riga di CSS.
✓ Preimpostazioni come il classico layout holy grail e una barra laterale stretta ti forniscono una dichiarazione grid-template-areas reale e funzionante da cui partire, invece di una griglia vuota.

Casi d'uso

  • • Costruisci il classico layout a tre colonne con header e footer a larghezza intera e una riga centrale composta da nav, contenuto principale e aside, semplicemente digitando i nomi delle aree invece di scrivere a mano grid-template-areas.
  • • Crea l’impaginazione di una pagina delle impostazioni o di un pannello di amministrazione con una barra laterale a larghezza fissa accanto a una colonna di contenuto flessibile, e copia CSS e HTML esatti quando l’anteprima dal vivo corrisponde a ciò che desideri.
  • • Verifica che un insieme di aree con nome formi effettivamente rettangoli validi prima della pubblicazione: lo strumento segnala i nomi esatti che causerebbero errori in grid-template-areas nel browser.