Container queries vs media queries: chi decide il layout

Le media query misurano la viewport; le container query misurano lo spazio del componente che le contiene. Un componente riusabile vuole la seconda, perché la stessa card finisce in una sidebar da 280 px e in un main da 900 px.

Lo stesso componente in due contesti

.card-list {
  container-type: inline-size;
  container-name: cards;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@container cards (min-width: 30rem) {
  .card {
    grid-template-columns: 8rem 1fr;
    align-items: center;
  }
}

La card passa a due colonne quando il suo contenitore supera 30rem, non quando lo schermo supera 768 px. Nella sidebar resta in colonna singola e nel main passa a due: stesso CSS, nessuna variante.

La stessa cosa con una media query

/* funziona finché la card vive in una sola colonna di pagina */
@media (min-width: 48rem) {
  .card {
    grid-template-columns: 8rem 1fr;
  }
}

/* la variante che serve per la sidebar */
.sidebar .card {
  grid-template-columns: 1fr;
}

La media query risponde alla larghezza dello schermo, quindi la card si allarga anche quando sta in una colonna da 300 px. La correzione è un selettore di contesto, e ogni nuovo contesto aggiunge una regola.

Chi decide cosa

Il record e il comando

Blocchi pensati per stare in contenitori di misura diversa: uploadthing-image-grid, la categoria card e le sezioni hero. Il catalogo conta 1.556 blocchi e 111.985 componenti da 1.472 librerie (1 novembre 2026).

# dove sono dichiarati i container nel progetto
grep -rn "container-type" --include="*.css" src/

# la card deve reggere anche a 320 px di viewport
npx playwright screenshot --viewport-size=320,800 http://localhost:3000 narrow.png

I tre limiti

• Un container non può stilizzare se stesso: la query vale per i discendenti, quindi serve un elemento interno.
• container-type: inline-size aggiunge containment orizzontale: un figlio con width: 100% non allarga più il contenitore.
• container-type: size richiede un'altezza esplicita, altrimenti l'elemento collassa.

Limite noto: senza container-name la query colpisce il container antenato più vicino, e in un layout annidato quel container potrebbe non essere quello che immaginavi. Il nome esplicito costa una riga e toglie l'ambiguità.

Per la griglia che ospita i container vedi Flexbox o Grid, per le tracce condivise Subgrid. Le stesse query in versione utility sono in container queries con Tailwind.