Container queries

Container queries let components adapt to their slot width or style instead of the viewport. Declare a query container, then write `@container` rules.

					.card-slot {
  container-type: inline-size;
  container-name: card;
}
.card {
  display: grid;
  grid-template-columns: 1fr;
}
@container card (min-width: 24rem) {
  .card { grid-template-columns: 6rem 1fr; }
}
				

`container-type: inline-size` enables width queries; `size` includes block size but is heavier. Containment can affect percentage resolution — test component behavior in sidebars, grids, and embeds.

On interviews: why reusable cards benefit from container queries and how containment changes sizing.

Common pitfalls: forgetting `container-type` so queries never match; duplicating page-shell responsibilities that belong in media queries.

The trade-off is portable components versus extra containment awareness in parent layouts.

Checklist:

• Declare container-type on the slot wrapper.
• Query at component boundaries.
• Keep viewport media queries for page shell.
• Test in narrow and wide parent contexts.