# Subgrid: tre casi reali

Subgrid allinea titoli, testi e prezzi tra card diverse, e lascia un componente usare le colonne della pagina. Tre casi con codice e i limiti veri.

> Pagina: https://ui.eneawork.it/blog/css-subgrid-casi-reali
> Markdown: https://ui.eneawork.it/blog/css-subgrid-casi-reali.md

*2026-11-01*

Subgrid risolve un problema preciso: un componente deve allinearsi alle tracce del contenitore, non solo stare dentro. Tre casi in cui serve davvero, con il codice minimo e i limiti che nessuna guida cita.

caniuse riporta 94,43% di supporto globale per CSS Subgrid (dati letti dal repository caniuse il 2 novembre 2026). La domanda «Is there a subgrid feature to position grandchildren?» vale 29 voti su Stack Overflow (letto lo stesso giorno con la Stack Exchange API): fonte. Il catalogo EneUI ha misurato 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie (/api/stats, 1 novembre 2026).

## Caso 1: card con titoli e prezzi allineati

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; } .card { display: grid; grid-row: span 4; grid-template-rows: subgrid; } .card h3, .card p, .card .price, .card .cta { margin: 0; }

Il genitore dichiara le righe, le card le ereditano con grid-template-rows: subgrid e i margini interni spariscono. Titoli, testi e prezzi partono alla stessa altezza anche quando un testo è lungo il doppio.

## Caso 2: coppie etichetta e valore

.specs { display: grid; grid-template-columns: max-content 1fr; grid-template-rows: repeat(4, auto); column-gap: 2rem; row-gap: 0.5rem; } .spec-group { display: grid; grid-row: span 4; grid-template-rows: subgrid; }

Due colonne e quattro righe condivise: le etichette restano larghe quanto la più lunga e i valori si allineano tra gruppi diversi. Con Flexbox servirebbe una larghezza fissa indovinata, che si rompe alla prima traduzione.

## Caso 3: un componente dentro la griglia della pagina

.page { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 12rem; gap: 2rem; } .form { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; } .form .field { grid-column: 2; }

Il form non inventa una griglia propria: usa le tre colonne della pagina, quindi i campi partono dalla stessa linea del testo sopra. Il componente resta riusabile perché non conosce le misure, solo il numero di tracce.

## Quando non serve

## Il record e il comando

Un elenco a griglia già composto è grid-list-01; le primitive sono in card e i prezzi in pricing. Il catalogo conta 1.556 blocchi da 1.472 librerie (1 novembre 2026).

# cerca le griglie annidate che potrebbero ereditare le tracce grep -rn "grid-template-columns" --include="*.css" src/ | wc -l # verifica il risultato a due larghezze npx playwright screenshot --viewport-size=1440,900 http://localhost:3000 wide.png

## Il limite noto

Il figlio deve coprire esattamente le righe che vuole ereditare: con grid-row: span 3 su un genitore a quattro righe, l'ultima resta fuori e l'allineamento salta senza avviso. Il secondo limite è il supporto: 94,43% lascia fuori Safari precedenti alla 16, dove il layout torna a griglie indipendenti.

Per le aree nominate sullo stesso principio vedi Grid con aree nominate. Per il modello di layout di partenza Flexbox o Grid; il confronto tra utility e CSS Modules è Tailwind vs CSS Modules.

## FAQ

### Subgrid funziona anche in orizzontale?

Sì, con grid-template-columns: subgrid. Un componente può ereditare solo le colonne, solo le righe o entrambe.

### Il figlio deve essere figlio diretto della griglia?

Sì. Subgrid funziona tra griglia e grid item diretto; con un wrapper in mezzo il legame si spezza e serve display: contents.

### Come gestisco il gap?

Sull'asse condiviso i gutter arrivano dal genitore. Se ridefinisci gap sul figlio non cambi l'allineamento, cambi solo lo spazio delle tracce non condivise.

### Subgrid sostituisce le aree nominate?

No. Le aree descrivono zone di una griglia, subgrid lega due griglie. Si usano insieme: il genitore ha le aree, il figlio eredita le tracce.

### Cosa succede nei browser senza supporto?

La dichiarazione viene ignorata e il figlio diventa una griglia indipendente. Il contenuto resta leggibile, l'allineamento tra card no: serve un test, non un polyfill.