# Container queries vs media queries: who decides the layout

Media queries watch the screen, container queries watch the component's space. That decides whether a card adapts anywhere or only at one breakpoint.

> Page: https://ui.eneawork.it/blog/container-queries-vs-media
> Markdown: https://ui.eneawork.it/blog/container-queries-vs-media.md

*2026-11-01*

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.

caniuse riporta 95,81% di supporto globale per le container query di dimensione (dati letti dal repository caniuse il 2 novembre 2026). La domanda «Container query collapses width of element» vale 28 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).

## 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

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.

## FAQ

### Le container query sostituiscono le media query?

No. Le media query restano lo strumento per la struttura della pagina e per le scelte di navigazione; le container query servono ai componenti che vivono in spazi diversi.

### Perché la card non cambia mai layout?

Quasi sempre il container non ha container-type, oppure il container è l'elemento stesso che vuoi stilizzare. La query guarda i discendenti, non il container.

### Che differenza c'è tra inline-size e size?

inline-size misura solo l'asse orizzontale e non richiede altezza. size misura entrambi gli assi e richiede un'altezza esplicita, altrimenti il contenuto collassa.

### Le container query hanno effetto sulla performance?

Il costo è contenuto perché il browser ricalcola solo il sottoalbero del container. Il rischio è il containment: un contenitore che non cresce più con i figli rompe i layout a misura di contenuto.

### Come si testano?

Ridimensiona il contenitore, non la finestra: le DevTools permettono di selezionare un elemento e vedere le sue dimensioni. Un test visivo a 280 px di sidebar copre il caso che la viewport non mostra.