Generatore di layout CSS

Visualizza l'anteprima di un layout Flexbox o Grid.

Sul tuo dispositivo · Senza account

Generatore di layout CSS elabora i dati inseriti in questo browser. Dati inseriti e risultati sono esclusi dalle analisi statistiche. Gli strumenti recenti memorizzano i nomi degli strumenti, il numero di visite e la data e l'ora dell'ultima visita. Gli strumenti salvati memorizzano solo i nomi. Il salvataggio delle bozze è facoltativo e avviene su questo dispositivo; elimina il testo salvato con i comandi della bozza. Caricare testo da un URL è facoltativo e contatta il relativo server, che può vedere l'URL e il tuo indirizzo IP. L'azione facoltativa “Usa in” conserva in questa scheda i dati da passare allo strumento successivo. Lo strumento successivo li rimuove all'apertura e li ignora se è trascorso più di un minuto.

“Copia link” include nell'indirizzo i dati che scegli di condividere. Chiunque abbia il link può riaprirli. File e risultati generati sono esclusi. Gli strumenti per password e chiavi condividono solo le impostazioni.

Italiano

Etichette degli elementi, una per riga

Layout

Opzioni e file locale

Colonne della griglia

Spazio tra gli elementi (px)

Dimensione di base Flexbox (px)

Apri un file di testo da questo dispositivo

Le impostazioni facoltative valgono solo per questa scheda.

Risultato

Codice HTML

Altro

Scorciatoie da tastiera

Link e ripristino

I link includono i dati inseriti e le impostazioni. Chiunque abbia il link può vederli, quindi non inserire testi privati. I file e i risultati generati sono esclusi; le estrazioni casuali vengono ripetute.

Il ripristino ricarica lo strumento con i valori iniziali e rilascia i file aperti e il controllo dei dispositivi. Le bozze salvate restano su questo dispositivo finché non le elimini.

Come funziona il generatore di layout CSS

Genera un layout Grid responsive o Flexbox con elementi che vanno a capo, partendo dalle loro etichette. Cambia il numero di colonne, lo spazio tra gli elementi o la dimensione di base Flexbox, poi copia o scarica lo stesso HTML autonomo usato nell'anteprima.

Successivo: Formattatore CSS

Successivo: Calcolatore di specificità CSS

Successivo: Verifica contrasto colori

Esempio

Una griglia a tre colonne usa repeat(3, minmax(0, 1fr)), così le etichette lunghe possono andare a capo all'interno di colonne di uguale larghezza. Flexbox dispone invece gli elementi su più righe in base alla loro dimensione di base preferita e allo spazio disponibile.

Prima di usare il risultato

È un punto di partenza per un layout, non un generatore di siti completi o una verifica della compatibilità con i browser. L'anteprima usa uno stile dimostrativo fisso. Grid mantiene il numero di colonne scelto anche a larghezze ridotte; aggiungi media query se il progetto finale richiede un numero diverso di colonne.

Cita questa pagina

Stile di citazione

ToolOctopus. “Generatore di layout CSS.” Aggiornato 7 ottobre 2026. https://tooloctopus.com/it/generatore-di-layout-css.

Aggiungi la data di consultazione se le istruzioni che segui la richiedono.

Le citazioni sono formattate con citeproc-js di Frank Bennett e gli stili Citation Style Language. Licenza e codice sorgente.