Generatore di Griglia CSS
Costruttore visuale di layout CSS Grid. Personalizza colonne, righe, spaziatura e allineamento. Copia il codice CSS e HTML.
Impostazioni
Item Properties
Anteprima
Codice Generato
Informazioni su Generatore di Griglia CSS
Componi visivamente un layout con CSS Grid: imposta fino a dodici colonne e dodici righe, regola le distanze tra righe e colonne e digita dimensioni delle tracce come 1fr, 200px o auto. Fai clic su una cella qualsiasi per assegnarle un'estensione con valori espliciti di inizio e fine per grid-column e grid-row: l'anteprima si aggiorna mentre lavori e il CSS e l'HTML corrispondenti vengono scritti pronti da copiare. I preset ti fanno partire dai layout più diffusi, tra cui holy grail, sidebar, dashboard e griglie di card. Tutto viene generato localmente nel browser.
Casi d'uso
Come usare
Parti da un layout predefinito - Holy Grail, Sidebar, Dashboard, Galleria, Blog o Card - oppure costruisci la griglia da zero.
Nel pannello Impostazioni trascina i cursori Colonne e Righe da 1 a 12 e i cursori Spaziatura colonne e Spaziatura righe da 0 a 64px.
Modifica i campi delle dimensioni di ogni colonna e di ogni riga per sostituire 1fr con valori come 250px, auto o minmax(200px, 1fr).
Fai clic su un blocco colorato nell'Anteprima per selezionarlo, poi imposta Col Start, Col End, Row Start, Row End ed Etichetta per estenderlo su più celle.
Regola i due menu a tendina di allineamento per justify-items e align-items scegliendo tra stretch, start, center ed end.
Preleva il risultato da Codice generato con il pulsante CSS, il pulsante HTML oppure Copia tutto per avere insieme markup e foglio di stile.
Suggerimenti Pro
- Incolla direttamente il tuo contenuto: il Generatore di CSS Grid riconosce i formati di input più comuni e applica automaticamente impostazioni sensate.
- Usa le scorciatoie da tastiera (Ctrl/Cmd+A per selezionare tutto, Ctrl/Cmd+C per copiare) per velocizzare il lavoro nel Generatore di CSS Grid.
- Con input molto grandi, suddividili in blocchi: la maggior parte delle schede del browser regge megabyte di testo, ma l'analisi di volumi enormi può bloccare per un attimo l'interfaccia.
- Il Generatore di CSS Grid non registra né conserva ciò che inserisci. Se ti serve uno storico, copia i risultati importanti in un file locale o in un'app per appunti.
- Combina il Generatore di CSS Grid con gli altri strumenti del sito (formattatori, convertitori, codificatori) per creare pipeline di dati complete senza uscire dal browser.
Domande frequenti
Sì, è completamente gratuito: nessuna registrazione, nessuna chiave API, nessuna filigrana e nessun limite di utilizzo.
No. Il Generatore di CSS Grid funziona interamente lato client nel tuo browser. Ciò che inserisci non raggiunge mai i nostri server.
Non c'è un limite rigido, ma con input superiori a qualche megabyte è normale un rallentamento, a seconda della memoria del tuo dispositivo.
Sì. I risultati prodotti con il Generatore di CSS Grid sono tuoi e puoi usarli liberamente in qualsiasi progetto personale o commerciale.
Gran parte della logica gira in JavaScript lato client, quindi dopo il primo caricamento puoi spesso continuare a lavorare senza connessione di rete.
Nessuno. Poiché il Generatore di CSS Grid funziona nel tuo browser, puoi elaborare tutti gli input che il tuo hardware consente, senza chiavi API né limitazioni.