Subgrid: tre casi reali

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.

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.