Container queries, three years in

Container queries shipped everywhere in 2023 after roughly a decade of people asking for them. The promise was that a component could respond to the space it is given rather than the size of the window. Three years on, the honest assessment is that they solved one problem completely and left a second one mostly untouched.

The solved problem is the component that appears in two places. A card in a wide main column and the same card in a narrow sidebar used to need a modifier class, and that modifier had to be applied by whoever placed it, which meant it was applied wrong. Now the card measures its own container and decides. The modifier class is gone and the bug class that came with it is gone too.

The unsolved problem is typography. You still cannot set a font size from the container's width without `cqw` units behaving differently from what most people expect — they scale linearly, so a heading that looks right at 400 pixels of container is enormous at 900. `clamp()` with `cqw` in the middle works, but you are back to picking three numbers by hand, which is what we were doing before.

The feature that was supposed to change everything. Here is what it actually changed.

There is a specific case where it earns its place immediately: any number that must fit inside a fixed box. A countdown timer, a price, a metric on a dashboard. Set the font size from the container and the number can never overflow its card, regardless of how the grid resolves at that width. Viewport units cannot do this — a wide window can still contain a narrow cell.

The cost is one line: `container-type: inline-size` on the parent. That line creates a containment context, which means the element no longer sizes itself from its contents in the inline direction. In most layouts this changes nothing. In a few it collapses something you did not expect, which is why it is worth applying to the specific card rather than to every card by default.