Generatore di griglie CSS

Come usare

1. Definisci le dimensioni della griglia: inserisci il numero di colonne e di righe per il tuo layout.
2. Definisci le tracce: regola la larghezza di ogni colonna e l'altezza di ogni riga con unità fr, pixel, percentuali, auto o minmax().
3. Copia il CSS: le proprietà display: grid, grid-template-columns, grid-template-rows e gap generate sono pronte da incollare nel tuo foglio di stile.

Perché usare il generatore CSS Grid?

CSS Grid è il sistema di layout più potente di CSS, capace di creare layout bidimensionali complessi che prima richiedevano tabelle, float o JavaScript. Ma padroneggiare grid-template-columns, le unità fr, minmax(), repeat() e le aree nominate richiede pratica. Questo generatore visivo ti permette di costruire qualsiasi griglia con clic e trascinamento, poi produce un CSS pulito da usare immediatamente o da studiare per approfondire la tua comprensione di Grid.

Funzionalità

• Costruttore visivo di griglia: clicca per definire visivamente le tracce di colonne e di righe.
• Supporto delle unità fr: usa unità fr flessibili per colonne proporzionali responsive.
• Scorciatoia minmax(): crea facilmente colonne responsive con vincoli di dimensione minima e massima.
• Controllo dello spazio: regola column-gap e row-gap indipendentemente.
• Aree nominate: definisci grid-template-areas con un'interfaccia visiva di pittura di aree.

Domande frequenti

Cos'è un'unità «fr» in CSS Grid?

L'unità fr (frazione) distribuisce lo spazio disponibile in modo proporzionale. In una griglia a 3 colonne con 1fr 2fr 1fr, la colonna centrale riceve il doppio dello spazio rispetto a quelle esterne. Le unità fr si dividono lo spazio rimanente dopo l'allocazione delle tracce a dimensione fissa.

Come creare una griglia responsive senza media query?

Usa repeat(auto-fill, minmax(200px, 1fr)) come valore di grid-template-columns. Questo crea il maggior numero di colonne che la dimensione minima consente, estendendosi per riempire lo spazio disponibile. Gli elementi si riorganizzano automaticamente quando la larghezza del contenitore cambia.

Qual è la differenza tra grid-template e grid-auto?

grid-template-columns/rows definisce le tracce esplicite che specifichi. grid-auto-columns/rows definisce la dimensione delle tracce implicite, colonne e righe create automaticamente quando gli elementi traboccano dalla griglia esplicita.

Una breve storia di CSS Grid

Prima di CSS Grid, i layout web hanno attraversato tre epoche dolorose. I layout basati su tabelle (1995-2008) abusavano dell'elemento <table> per la struttura visiva, con il «taglio» di composizioni Photoshop in griglie HTML. I layout basati su float (2008-2013) hanno sostituito le tabelle con la proprietà float, richiedendo trucchi «clearfix» come il micro-clearfix di Nicolas Gallagher (2011) per contenere i figli avvolti. Flexbox (CSS Flexible Box Layout Module Level 1, Raccomandazione W3C 2018) ha risolto i layout unidimensionali ma faticava con le vere griglie bidimensionali. La storia di CSS Grid è iniziata con l'implementazione -ms-grid di Microsoft in Internet Explorer 10 (2012), una versione iniziale che ha informato la specifica W3C. La prima bozza pubblica di lavoro W3C del CSS Grid Layout Module Level 1 è uscita in aprile 2011, ma il vero slancio è venuto dal lavoro di sostegno di Rachel Andrew (il suo libro Get Ready for CSS Grid Layout, 2016) e Jen Simmons (Mozilla developer advocate, circuito conferenze 2016-2018). La corsa dei browser si è risolta in una notevole finestra di due mesi nel marzo 2017: Chrome 57, Firefox 52, Safari 10.1 ed Edge 16 hanno tutti consegnato Grid senza prefisso a poche settimane di distanza l'uno dall'altro. Il W3C ha contrassegnato Grid Level 1 come Raccomandazione Candidata nel dicembre 2016; la Raccomandazione W3C finale è arrivata in agosto 2020. Subgrid (Level 2) è stato consegnato in Firefox 71 (dic. 2019), Safari 16 (sett. 2022) e Chrome 117 (sett. 2023). La prossima frontiera è il proposto layout Masonry (proposta CSS Working Group 2020, dietro flag in Firefox dal 2021).

L'anatomia di una griglia CSS

• Il contenitore di griglia. display: grid (o display: inline-grid) trasforma qualsiasi elemento in un contesto di griglia. I figli diretti di quell'elemento diventano «elementi di griglia» e partecipano al layout di griglia. I nipoti non sono interessati a meno che non impostino anche display: grid.
• grid-template-columns e grid-template-rows. Definiscono le tracce esplicite (colonne e righe). I valori possono essere fissi (px, em, rem), flessibili (fr, l'unità «frazione» definita nella specifica CSS Grid), dimensionati per contenuto (auto, min-content, max-content), o qualsiasi combinazione. grid-template-columns: 200px 1fr 1fr crea una barra laterale di 200px più due colonne flessibili uguali.
• L'unità fr. L'unità di frazione distribuisce lo spazio rimanente dopo che le tracce a dimensione fissa sono allocate. 1fr 2fr 1fr dà alla colonna centrale il doppio dello spazio rimanente delle colonne laterali. fr è esclusivo di Grid (e l'equivalente correlato flex-basis: 0 1 fr in Flexbox non è la stessa cosa). Risolve ciò con cui il pattern «colonna percentuale» ha lottato per decenni: distribuzione pulita dello spazio rimanente.
• repeat() e minmax(). repeat(3, 1fr) definisce in modo compatto tre colonne uguali. minmax(200px, 1fr) vincola una traccia a un intervallo. La combinazione vincente grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) produce una griglia responsiva che regola automaticamente il numero di colonne per adattarsi al contenitore, senza media query. Questa singola riga ha sostituito migliaia di definizioni di breakpoint nel CSS di produzione.
• grid-template-areas. Una sintassi a stringhe disposte visivamente che nomina le regioni della griglia. I figli si iscrivono a un'area nominata con grid-area: header. Il risultato è layout-come-arte-ASCII: chiunque legga il CSS può visualizzare la griglia dal sorgente. Particolarmente potente per il layout «santo graal» (intestazione / barra laterale / principale / aside / piè di pagina) che ha sconfitto i designer CSS per un decennio.
• gap (e column-gap, row-gap). Definisce la spaziatura tra le tracce. gap: 16px distanzia uniformemente tutte le righe e colonne. Prima di Grid, ciò richiedeva fragili pattern padding+margin o margini negativi calcolati con attenzione. La stessa proprietà gap è stata successivamente aggiunta a Flexbox (universalmente supportata dal 2022) ed è ora considerata il modo canonico di gestire la spaziatura tra elementi nel CSS moderno.

Pattern Grid del mondo reale

• Gallerie di immagini. Il pattern repeat(auto-fill, minmax(200px, 1fr)) è il CSS dominante per i siti di portfolio (griglie Behance), gallerie fotografiche (stile Unsplash) e collezioni di prodotti. L'auto-adattamento del numero di colonne senza media query era praticamente impossibile prima di Grid.
• Dashboard e pannelli di amministrazione. Grafana, Datadog, Stripe Dashboard e la maggior parte delle moderne UI di amministrazione usano aree di griglia nominate per posizionare card, barre laterali e regioni di contenuto. I costruttori di dashboard drag-and-drop (DataDog, Looker, Tableau) traducono le azioni dell'utente in mutazioni di stringhe grid-template-areas.
• Layout in stile rivista. I siti editoriali (The Guardian, NYT, Vox) usano Grid per layout asimmetrici con elementi sovrapposti, grandi immagini hero che si estendono su più colonne e citazioni pull-quote che escono dalla colonna di testo principale. L'asse z di Grid (z-index con aree esplicite) gestisce naturalmente la sovrapposizione.
• Griglie di card di prodotto. Vetrine Shopify, Amazon, Etsy. Il pattern è così comune che Tailwind CSS, Bootstrap e Bulma forniscono tutti componenti card basati su Grid come parte del loro set di utility principali. Il rapporto d'aspetto delle card è ora tipicamente bloccato con la proprietà aspect-ratio (Safari 15, Chrome 88, 2021).
• Il layout «santo graal». Intestazione / barra laterale sinistra / contenuto principale / barra laterale destra / piè di pagina. Questo layout a 5 regioni è stato il problema irrisolto del CSS per 15 anni. Con grid-template-areas e 8 righe di CSS, è diventato banale nel 2017. Il pattern domina i siti di documentazione (Stripe Docs, MDN, Vercel Docs).
• Layout di moduli. Layout di moduli a due colonne con etichette a sinistra e input a destra, moduli di indirizzo con città/stato/CAP in una riga, procedure guidate a più passaggi. Grid permette a etichette e input di allinearsi pulitamente attraverso le righe anche quando le larghezze del contenuto variano. Il pattern ha sostituito approcci precedenti basati su trucchi di larghezza dell'etichetta con CSS più pulito.
• Posizionamento di modali e dialoghi. display: grid; place-items: center; su un overlay a tutto viewport centra perfettamente un dialogo orizzontalmente e verticalmente con una singola riga, sostituendo decenni di pattern position: absolute; top: 50%; transform: translateY(-50%);. place-items è il modo canonico 2024 di centrare contenuto arbitrario.
• Responsivo senza media query. Combinare repeat(auto-fill, minmax(...)) con gap produce layout che si adattano alla larghezza del contenitore senza alcuna media query. È il fondamento del design responsivo moderno: layout che rispondono alla dimensione del contenitore piuttosto che alla dimensione del viewport, anticipando le Container Queries (ora anche consegnate, 2023).

Standard e pietre miliari

• IE10 -ms-grid (2012). Microsoft ha consegnato la prima implementazione di tipo Grid, progettata da Phil Cupp in Microsoft. La sintassi differiva dalla specifica W3C eventuale ma ha provato il concetto e influenzato le successive decisioni di design.
• CSS Grid Layout Module Level 1, Bozza di Lavoro W3C (aprile 2011). La prima bozza pubblica W3C. Sono seguite molteplici iterazioni; la sintassi è evoluta significativamente tra il 2011 e l'implementazione finale del 2017.
• Sostegno di Rachel Andrew e Jen Simmons (2014-2017). Il libro di Andrew Get Ready for CSS Grid Layout (Smashing Magazine, 2016) e i discorsi di conferenza di Simmons come Mozilla developer advocate hanno costruito la base di conoscenza della community che ha reso possibile la spedizione da parte dei browser. Entrambe sono accreditate nelle note dell'editor W3C della specifica.
• Corsa dei browser, marzo 2017. All'interno di una notevole finestra di due mesi, Chrome 57 (9 marzo), Firefox 52 (7 marzo), Safari 10.1 (27 marzo) ed Edge 16 (ottobre 2017) hanno tutti consegnato Grid senza prefisso. Questo livello di spedizione sincronizzata cross-browser era quasi senza precedenti per una funzionalità di questa complessità.
• Raccomandazione Candidata (dicembre 2016). CSS Grid Level 1 è stato promosso a Raccomandazione Candidata W3C, lo stadio finale prima della Raccomandazione W3C. La fase CR tipicamente richiede anni; Grid si è mosso più velocemente della maggior parte delle funzionalità CSS in questo stadio.
• Raccomandazione W3C (agosto 2020). Grid Level 1 è stato finalizzato come Raccomandazione W3C. Questa è tecnicamente la data di «lancio» della specifica, ma ogni browser principale aveva consegnato un'implementazione funzionante tre anni prima.
• Subgrid (Level 2, 2019-2023). Subgrid permette a un elemento di griglia di ereditare le definizioni di traccia del suo genitore, risolvendo il problema di «allineamento delle griglie annidate». Firefox 71 (dic. 2019), Safari 16 (sett. 2022), Chrome 117 (sett. 2023). Il lento rollout di Chrome riflette la complessità dell'implementazione.
• Layout Masonry (proposto, 2020-). Il CSS Working Group sta dibattendo la sintassi dal 2020. Firefox lo ha consegnato dietro un flag nel 2021. Layout fluenti in stile Pinterest che impacchettano gli elementi in colonne sono il caso d'uso target. Il team Chrome (guidato da Apple) e il team Mozilla hanno proposto sintassi concorrenti; risoluzione in sospeso al 2024.

Altre domande frequenti

Quando dovrei usare Grid invece di Flexbox?

La scorciatoia della community: Flexbox è per una dimensione, Grid per due. Se stai disponendo una riga di pulsanti o allineando elementi in un'unica direzione, Flexbox è più semplice. Se stai progettando un layout di pagina intera con righe e colonne che devono allinearsi, Grid è lo strumento giusto. Molti layout reali combinano entrambi: Grid per lo scheletro della pagina, Flexbox per l'allineamento a livello di componente all'interno di ogni area di griglia. I framework moderni (Tailwind, Bootstrap 5) abbracciano questo pattern.

CSS Grid funziona nei browser più vecchi?

Tutti i browser evergreen (Chrome, Firefox, Safari, Edge) supportano Grid da marzo 2017. Internet Explorer 11 ha solo la sintassi precedente -ms-grid (sottoinsieme, prefissato, mancante di molte funzionalità). Per il supporto IE11, usa query @supports per tornare a Flexbox o layout basati su float. A partire dal 2024, IE11 ha meno dello 0,5% di uso globale, quindi la maggior parte dei team ha abbandonato il fallback. Caniuse.com riporta oltre il 97% di supporto globale per Grid senza prefisso.

Qual è la differenza tra grid-template-areas e grid-area?

grid-template-areas è impostato sul contenitore di griglia e mappa visivamente le regioni nominate della griglia (una stringa per riga). grid-area è impostato su un elemento di griglia per assegnarlo a una di quelle regioni nominate. I due lavorano insieme: il contenitore dichiara la «mappa», gli elementi dichiarano «io sono la regione X». Puoi anche usare grid-area direttamente con numeri di linea (grid-area: 1 / 1 / 3 / 4) invece di nomi, che è utile per layout dinamici.

Cos'è subgrid e quando dovrei usarlo?

Subgrid permette a una griglia annidata di ereditare le definizioni di traccia della sua griglia genitore invece di crearne le proprie. Questo risolve il problema di allineare elementi attraverso griglie annidate, per esempio, una card con layout interno che deve allinearsi con le card circostanti. Usa grid-template-columns: subgrid sulla griglia annidata. Disponibile in Firefox 71+ (dic. 2019), Safari 16+ (sett. 2022), Chrome 117+ (sett. 2023). Ricade su una griglia annidata regolare nei browser che non la supportano.

Come interagisce Grid con l'accessibilità?

Il posizionamento Grid non cambia l'ordine sorgente del DOM: gli elementi appaiono nella posizione visiva che assegni, ma lettori di schermo e ordine di tabulazione da tastiera seguono la sorgente. WCAG 2.1 SC 1.3.2 Sequenza Significativa richiede che l'ordine sorgente abbia senso quando gli stili vengono rimossi. L'implicazione: progetta prima la tua sorgente DOM per un ordine di lettura logico, poi usa Grid per posizionare gli elementi visivamente. Se riordini gli elementi drasticamente con grid-column: 3 / 5; grid-row: 2, controlla con un lettore di schermo per confermare che l'ordine parlato abbia ancora senso.