Chapter 25 — Container Queries

Style components from their parent’s width so the same card can adapt in a narrow rail and a wide main column.

New concepts

container-type, optional container-name, and @container width queries (including range syntax).

Read the Container Queries gauge

What changes after Design Tokens?

Chapter 11 taught viewport media queries. Tokens document shared breakpoints. Container queries let a reusable widget respond to the space it actually has.

Lessons

  1. 1. Establish an inline-size container
  2. 2. Restyle a card with @container

Checkpoint

Build one card component used in both a narrow aside and a wide main region. Use a single class and an @container rule so only the wide parent triggers the horizontal layout.