Container Queries — Allowed

This gauge covers Chapter 25 after Design Tokens. Complete Chapter 11 (Responsive) first — width media queries remain the page-level tool.

Learning goal

Style a component from its container width instead of the viewport, so the same card can look stacked in a narrow sidebar and multi-column in a wide main column without viewport breakpoints guessing the layout.

Inherited tools

Everything allowed through ../design-tokens/allowed.md and ../responsive/allowed.md remains available.

New CSS

• container-type: inline-size (or size) on a containment context
• Optional container-name for named queries
• @container with width comparisons (min-width, max-width, or range syntax such as (width >= 24rem))
• Shorthand container: name / inline-size when useful

Learning rules

1. Put container-type on the parent whose width should drive the child.
2. Query that container with @container, not @media, for component variants.
3. Keep a usable default layout outside the query; enhance when space allows.
4. Prefer inline-size containment for width-driven UI; full size containment is rarer and can affect height calculation.
5. Name containers when a page has more than one nested query context.
6. Do not replace every viewport query — use media queries for page chrome and container queries for reusable cards, asides, and widgets.

Not allowed

• JavaScript
• Replacing Chapter 11 media-query lessons — those still matter for the page
• Inline styles
• Any HTML tag or CSS property not inherited or listed above

Pages

• 01-container-type.html — establish an inline-size container
• 02-card-query.html — restyle a card when its container grows

Rules to lean on

Rules on responsive layout (99–110), design tokens, and the container-query rules added beside them in rules.md.