Generatore Grid CSS
Crea layout CSS Grid con anteprima interattiva.
fare clic su Cella da espandere
/* Contenedor */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 8px;
}Generatore visuale di layout CSS Grid
CSS Grid Layout è il sistema di layout bidimensionale più potente disponibile nel CSS. A differenza di Flexbox, che lavora su un singolo asse (riga o colonna), CSS Grid permette di controllare righe e colonne simultaneamente, rendendolo ideale per creare layout di pagina completi, gallerie di immagini, dashboard e qualsiasi design che richieda una struttura a griglia precisa e prevedibile.
Il nostro generatore visuale ti permette di definire il numero di colonne e righe, personalizzare i template di dimensione (grid-template-columns e grid-template-rows) usando unità come fr, px, % o auto, regolare gli spazi tra le celle (column-gap e row-gap), ed espandere celle individuali per occupare più colonne o righe usando grid-column: span e grid-row: span.
L'anteprima si aggiorna in tempo reale mostrando esattamente come apparirà la tua griglia. Clicca su qualsiasi cella per selezionarla e usa i controlli di espansione per farla occupare più di una colonna o riga. Il codice CSS generato include tutte le proprietà necessarie per replicare l'esatto layout che vedi nell'anteprima, pronto per copiare e usare nel tuo progetto.
Domande frequenti
Cosa significa l'unità "fr"?
L'unità "fr" (frazione) rappresenta una frazione dello spazio disponibile nel contenitore grid. Ad esempio, "1fr 2fr" crea due colonne dove la seconda è il doppio della prima. È simile a flex-grow ma più intuitivo per definire le proporzioni.
CSS Grid sostituisce Flexbox?
No, sono complementari. Flexbox è ideale per layout unidimensionali (una riga o una colonna), mentre Grid eccelle nei layout bidimensionali (righe e colonne simultaneamente). La best practice è usare Grid per il layout generale della pagina e Flexbox per i componenti interni.
È compatibile con tutti i browser?
Sì, CSS Grid ha pieno supporto in tutti i browser moderni: Chrome, Firefox, Safari, Edge e Opera. Solo Internet Explorer 11 aveva un'implementazione parziale con sintassi diversa.
Vuoi saperne di più? Leggi la nostra guida completa →