Generatore di CSS Grid

Benvenuto nel CSS Grid Generator — un costruttore visivo interattivo gratuito che trasforma i clic in codice CSS Grid pulito e pronto per la copia. Che tu stia progettando il wireframe di un layout Holy Grail, prototipando una galleria fotografica o imparando come funzionano grid-template-columns e grid-area, questo strumento ti offre un'anteprima dal vivo, controlli di ridimensionamento per traccia e un'esportazione con un clic — nessuna configurazione, nessuna registrazione, nessun backend.

Cos'è il CSS Grid Generator?

Questo strumento è un parco giochi per layout bidimensionali. Definisci righe e colonne, fai clic sulle celle per posizionare gli elementi, trascina le estensioni (span) su più tracce e guarda il CSS generato aggiornarsi in tempo reale. A differenza della maggior parte dei generatori di griglie che producono solo grid-template-columns, questo supporta il posizionamento per singolo elemento (grid-row / grid-column), estensioni multicella, numerazione animata delle linee della griglia per chi sta imparando e sei preset collaudati che puoi caricare istantaneamente.

Cosa rende diverso questo generatore

Cosa significa l'unità fr in CSS Grid?

L'unità fr rappresenta una frazione dello spazio libero disponibile nel contenitore della griglia. Dopo aver sottratto le dimensioni fisse (px, em, %), lo spazio rimanente viene diviso proporzionalmente tra le tracce fr. Ad esempio, 1fr 2fr 1fr assegna alla colonna centrale il doppio dello spazio libero rispetto alle altre. fr è il modo più comune per creare layout flessibili e proporzionali che rispondono alle dimensioni del contenitore senza media query.

Qual è la differenza tra CSS Grid e Flexbox?

Flexbox è unidimensionale e dispone gli elementi lungo un singolo asse (una riga o una colonna). CSS Grid è bidimensionale e controlla righe e colonne contemporaneamente. Usa Flexbox per barre di navigazione, gruppi di pulsanti o singole righe di schede. Usa Grid per layout di pagina completa, gallerie fotografiche, dashboard e qualsiasi design in cui sia necessario un allineamento preciso su entrambi gli assi. Molte interfacce moderne combinano entrambi: Grid per lo scheletro della pagina, Flexbox all'interno delle singole celle.

Come faccio a far estendere un elemento della griglia su più celle?

Usa grid-column e grid-row con la parola chiave span o numeri di riga espliciti. Ad esempio, grid-column: span 2 rende un elemento largo due colonne, mentre grid-column: 1 / 4 lo estende dalla linea 1 alla linea 4. grid-row: 2 / span 3 inizia alla riga 2 ed estende tre righe. In questo generatore, fai clic su qualsiasi elemento per selezionarlo, quindi usa i pulsanti a freccia nel pannello laterale per ingrandire o rimpicciolire la sua estensione di righe e colonne — il CSS si aggiorna istantaneamente.

Cos'è minmax() in CSS Grid?

minmax(min, max) definisce una dimensione della traccia con un limite inferiore e superiore. Viene spesso abbinato a auto-fit o auto-fill in repeat() per creare griglie responsive senza media query. Ad esempio, repeat(auto-fit, minmax(200px, 1fr)) crea tante colonne da minimo 200px quante ne entrano nel contenitore, e le allunga per condividere equamente lo spazio rimanente: il pattern canonico per i layout di card responsive.

Come usare questo strumento

1. Scegli un preset di partenza — fai clic su uno dei sei preset di layout in alto per caricare un punto di partenza reale, oppure costruisci da zero.
2. Imposta righe e colonne — usa i contatori di righe e colonne per aggiungere o rimuovere tracce e modifica la dimensione di ogni traccia con fr, px, %, auto o minmax().
3. Posiziona ed estendi gli elementi — fai clic su qualsiasi cella vuota per aggiungere un elemento, oppure fai clic su un elemento esistente per selezionarlo e usa i pulsanti a freccia per cambiare la sua estensione riga/colonna.
4. Regola gap e allineamento — imposta il gap tra le righe e le colonne con gli slider e scegli justify-items e align-items dai menu a discesa.
5. Attiva l'overlay delle linee — attiva i numeri delle linee della griglia per vedere esattamente dove cadono le linee 1, 2, 3 — ottimo per imparare il posizionamento.
6. Copia o scarica — passa tra le schede CSS e HTML, quindi fai clic su Copia o Scarica per prelevare il codice generato.

I sei preset integrati

Casi d'uso pratici

Per Sviluppatori Frontend

• Prototipazione rapida di scheletri di pagina prima di scrivere il codice del componente
• Generazione di snippet repeat(auto-fit, minmax()) per griglie di card responsive
• Test visivo di grid-template-areas prima di impegnarsi in una struttura
• Esportazione simultanea del CSS del contenitore e della struttura HTML corrispondente

For Designer e Studenti

• Vedere esattamente come si comportano fr, auto e minmax() con un'anteprima dal vivo
• Attivare i numeri delle linee della griglia per capire il posizionamento basato su linee
• Sperimentare con i valori di estensione (span) senza scrivere codice
• Confrontare i preset fianco a fianco per imparare i pattern idiomatici di Grid

Per Educatori e Blogger

• Dimostrare i concetti di Grid nei workshop con l'overlay visivo
• Generare esempi di codice pulito per tutorial in pochi secondi
• Mostrare come la stessa struttura CSS Grid scala da 4 a 12 colonne

Suggerimenti per un CSS Grid più pulito

• Preferisci fr rispetto a % — fr rispetta i gap, mentre % no, quindi le griglie basate su % possono causare overflow.
• Usa grid-template-areas per regioni nominate — molto più leggibile dei numeri di riga e si autodocumenta.
• Scegli minmax() con auto-fit per griglie responsive senza media query.
• Imposta gap espliciti con gap: 1rem invece dei margini sugli elementi: i gap non collassano mai e non necessitano di pulizia.
• Combina Grid e Flexbox — Grid per lo scheletro della pagina, Flexbox all'interno delle celle. Non forzare uno strumento a fare entrambi i lavori.

Domande frequenti

Questo generatore supporta grid-template-areas?

Il preset Holy Grail utilizza grid-template-areas nel suo CSS esportato. Per gli altri preset utilizziamo il posizionamento basato su linee (grid-column / grid-row) poiché si adatta in modo più flessibile quando si fa clic e si riorganizzano gli elementi.

Posso esportare anche l'HTML?

Sì — passa alla scheda HTML nel pannello di esportazione per copiare una struttura HTML pronta all'uso che corrisponde esattamente al CSS generato.

Il CSS generato funzionerà sui browser più vecchi?

CSS Grid è supportato in tutti i browser moderni (Chrome, Edge, Firefox, Safari) e in IE11 con un'implementazione parziale. Per i browser moderni, non è necessario alcun fallback. Se devi supportare IE11, preferisci il posizionamento basato su linee (no gap, no minmax(), no repeat(auto-fit)) e testa accuratamente.

Lo strumento viene memorizzato nel mio browser?

Tutto viene eseguito lato client in JavaScript. Nulla viene inviato a un server, quindi il tuo layout, i nomi degli elementi e la configurazione rimangono privati sul tuo computer.

Funziona sui dispositivi mobili?

Sì — il builder si riorganizza in una singola colonna sui telefoni, i controlli rimangono cliccabili e l'anteprima rimane interattiva sui touch screen.

Risorse aggiuntive

• CSS Grid Layout - MDN Web Docs
• CSS Grid Layout Module Level 2 - Specifica W3C