Generatore di CSS Grid
Scegli le colonne, le righe e lo spazio tra loro, oppure usa la modalità responsive perché le card si riorganizzino da sole in base allo schermo. L’anteprima mostra subito il risultato.
Come si usaLayout con CSS Grid
Trascina l’angolo dell’anteprima per provare diverse larghezze. Tocca un elemento perché occupi 2 colonne.
Disponibile in: 
Generatore di CSS Grid: a cosa serve
Scegli colonne fisse (con scorciatoie per 2, 3 e 4 colonne, contenuto con barra laterale e menu con contenuto) o la modalità responsive, in cui le colonne si adattano alla larghezza con repeat(auto-fit, minmax()). Imposta il numero di elementi e lo spazio tra loro.
Tocca un elemento dell’anteprima perché occupi due colonne e trascina l’angolo dell’anteprima per provare diverse larghezze. CSS e HTML sono pronti da copiare.
Come si usa
- Scegli la modalità e le colonne.
- Imposta elementi e spazio; tocca gli elementi per farli occupare 2 colonne.
- Copia il CSS e l’HTML.
Quando usarlo
- Griglie di card, prodotti e foto.
- Layout con barra laterale.
- Imparare CSS Grid vedendo il risultato.
Domande frequenti
Cosa significa 1fr?
Una frazione dello spazio rimanente. Tre colonne 1fr 1fr 1fr dividono la larghezza in parti uguali; 2fr 1fr fa sì che la prima colonna sia il doppio della seconda.
Cosa fa repeat(auto-fit, minmax(220px, 1fr))?
Crea tutte le colonne che ci stanno, ciascuna con almeno 220px, ed estende le colonne per occupare l’intera riga. È il modo più semplice per fare una griglia di card responsive senza media query.
Come faccio occupare due colonne a un elemento?
Usa grid-column: span 2 sull’elemento. Nell’anteprima, tocca un elemento per alternare tra 1 o 2 colonne e il CSS si aggiorna.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.