Introduzione a Subgrid in CSS: cosa sono e perché sono utili
Il mondo del layout in CSS è in continua evoluzione, e la funzionalità Subgrid in CSS è una delle novità più attese e discusse tra gli sviluppatori frontend. Se hai già familiarità con CSS Grid – o hai letto la nostra Guida Flexbox e Grid Layout – saprai che Grid consente di creare layout a due dimensioni (colonne e righe) in modo estremamente potente. Tuttavia, quando si tratta di layout nidificati (ovvero griglie all’interno di altre griglie), la complessità può aumentare sensibilmente.
È qui che entra in gioco Subgrid in CSS: questa funzionalità permette a un elemento figlio di “ereditare” le linee del grid container di livello superiore, semplificando la gestione e l’allineamento degli elementi su più livelli. Il risultato è un controllo più fine sui layout complessi, senza dover ridefinire righe e colonne ogni volta.
In breve, Subgrid in CSS consente di creare un’unica griglia e di “estenderla” agli elementi figli, mantenendo coerenza e velocizzando lo sviluppo. È particolarmente utile nei layout complessi (come blog multi-colonna o siti di magazine) dove righe e colonne devono allinearsi perfettamente tra diverse aree.
Vantaggi di Subgrid in CSS rispetto a Grid tradizionale
- Coerenza del layout
Con Subgrid in CSS, puoi allineare con precisione voci di menu, sidebar e widget alle stesse linee di griglia del contenitore principale. Questo elimina il disallineamento tipico dei layout grid nidificati in modo “tradizionale”. - Meno codice ripetuto
Subgrid riduce la necessità di dichiarare nuove griglie per ogni livello di nidificazione. Le linee di griglia vengono ereditate, risparmiando molte righe di CSS. - Maggiore flessibilità
Se lavori su layout elaborati (ad esempio un header con più sezioni o un footer con varie colonne), Subgrid in CSS permette di mantenere un controllo granulare su spaziature e allineamenti senza definire ogni volta nuove regole. - Manutenzione semplificata
Hai un solo luogo dove gestire la struttura principale della griglia, evitando confusione e semplificando l’aggiornamento futuro del codice.
Prima dell’introduzione di questa feature, i developer si affidavano a un mix di Grid, Flexbox e hack vari per ottenere risultati simili. Ora, grazie a Subgrid, la gestione dei layout complessi risulta più lineare e potente.
Come utilizzare Subgrid in CSS
Sintassi base di Subgrid in CSS e impostazione
La sintassi di base per creare un Subgrid in CSS è relativamente semplice, soprattutto se hai dimestichezza con le proprietà di Grid. Dopo aver definito una griglia principale (il “container”), basta dichiarare che uno degli elementi figli (il “sub-container”) utilizza display: grid con grid-template-rows o grid-template-columns impostati su subgrid.
.container {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto;
gap: 1rem;
}
.sub-container {
display: grid;
grid-template-columns: subgrid; /* Subgrid sulle colonne */
grid-template-rows: subgrid; /* Subgrid sulle righe */
}Qui, .sub-container eredita sia la definizione di colonne sia quella di righe dal .container. Puoi anche scegliere di ereditare solo le colonne (grid-template-columns: subgrid) o solo le righe (grid-template-rows: subgrid), a seconda delle esigenze del tuo layout.
Esempi pratici di layout Subgrid in CSS
Supponiamo di voler creare un blog layout composto da un header orizzontale (in alto), una sezione principale con articoli (centro) e una sidebar (destra). Nel layout classico, dovresti:
- Definire una griglia per la pagina.
- Definire una seconda griglia per la sezione dei contenuti.
- Definire una terza griglia per gli eventuali widget della sidebar.
Con Subgrid in CSS, invece, puoi impostare una singola definizione di colonne nella griglia principale (es. tre colonne: la prima per la navbar, le altre due per contenuto e sidebar) e far sì che i vari elementi nidificati ereditino quelle stesse colonne.
.page-layout {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto;
gap: 2rem;
}
.main-content {
display: grid;
grid-template-columns: subgrid; /* Eredita le colonne del contenitore */
gap: 1rem;
}In questo modo, la sidebar a destra e l’area dei contenuti centrali si allineano coerentemente sulle stesse linee di griglia.
Uso di Subgrid in CSS con colonne e righe
Se vuoi ereditare solo la struttura verticale (le righe) dal container principale, puoi definire grid-template-rows: subgrid e specificare manualmente le colonne (o viceversa).
Questo risulta particolarmente comodo se in alcune sezioni vuoi mantenere la medesima altezza degli elementi (coerenza sulle righe) ma disporre le colonne in modo differente, o se vuoi ripetere soltanto la stessa traccia delle colonne e gestire manualmente l’altezza degli elementi.
Esempi di utilizzo reale di Subgrid in CSS
- Layout a più livelli
Immagina un layout multi-sezione con header, main e footer. Con Subgrid in CSS, definisci le colonne una sola volta nel wrapper principale, e poi ogni singola sezione (header, contenuti, footer) eredita questa traccia di colonne. Esempio:
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto auto auto;
gap: 1rem;
}
header {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
}
- Contenitori nidificati
Se hai più “blocchi” (ad esempio card, widget o box) da mantenere allineati, Subgrid evita di ridefinire ogni volta righe e colonne. Gli elementi figli (come le card) ereditano la struttura di griglia, assicurando un design coerente in tutto il layout.
Compatibilità e supporto browser per Subgrid in CSS
Nonostante la potenza di Subgrid in CSS, il supporto browser non è ancora uniforme. Al momento, funziona bene nelle versioni più recenti di Firefox. Safari e alcuni browser Chromium hanno iniziato ad aggiungere un supporto parziale o sperimentale. Prima di usarlo in produzione, controlla le tabelle di compatibilità su MDN Web Docs o su Can I use.
Se il tuo target di utenza usa browser moderni, Subgrid è un’ottima scelta. Per chi ha la necessità di coprire ancora browser meno aggiornati, conviene prevedere un fallback (per esempio con media queries, grid tradizionale o Flexbox).
Limiti e best practice
- Supporto incompleto
La prima limitazione è la compatibilità parziale tra i browser. Verifica sempre le statistiche di utilizzo e preparati a offrire layout alternativi nei browser non compatibili. - Gestione
gap
Quando erediti la griglia, erediti anche i gap (spaziature) impostati nel container padre. Se hai necessità di modificarli, potresti dover ridefiniregapall’interno del sub-container. - Attenzione alle aree nominate
Se usi le grid-template-areas, verifica che la logica di nominazione resti coerente. Subgrid eredita la struttura, ma non sempre le aree nominate funzionano come ci si aspetterebbe quando si passa ai livelli figli. - Progettazione modulare
Come regola generale, evita di trasformare tutto in un Subgrid. Mantieni la definizione di griglia per sezioni che effettivamente necessitano di un allineamento coerente a più livelli, così da semplificare il CSS e la manutenzione.
Se cerchi altre tecniche moderne per i tuoi layout, dai uno sguardo alla nostra Guida CSS Avanzato 2025, dove approfondiamo diverse soluzioni per migliorare il tuo workflow di sviluppo.
Conclusioni: quando e come usarlo per migliorare i layout avanzati
Subgrid in CSS offre un grande salto di qualità nella gestione di layout complessi, soprattutto quando è necessario allineare elementi su più livelli. È uno strumento potentissimo che semplifica il lavoro e riduce la duplicazione di codice.
Tuttavia, prima di utilizzarlo in produzione, assicurati che i tuoi utenti usino browser abbastanza recenti o implementa un solido fallback. In layout semplici, potresti non aver bisogno di Subgrid, quindi valuta se la struttura è così articolata da richiederlo davvero. Se invece affronti spesso progetti dove sidebar, widget e blocchi multipli devono allinearsi in modo coerente, Subgrid è probabilmente la soluzione perfetta.
Approfondisci ancora di più su risorse esterne autorevoli come CSS-Tricks e MDN Web Docs. Ora sai quando Subgrid può rivoluzionare il tuo workflow e rendere i tuoi layout più puliti ed efficienti. Buon lavoro e buon Subgrid!
