Container Query Units (cqw, cqh)

What Container Query Units Are For

Just as vw and vh size an element relative to the viewport, container query units size an element relative to its nearest queried container instead - useful once a component is meant to scale with the space it is actually given, not the whole browser window.

The Main Container Units

These Only Work Inside a Declared Container

.card-wrapper {
  container-type: inline-size;
}
.card-title {
  font-size: clamp(1rem, 5cqw, 2rem);
}

Here, the card's title font size scales with the width of its own container - card-wrapper - rather than the width of the browser window, so the same card component scales appropriately whether it sits in a wide column or a narrow sidebar.

Pairing Container Units with clamp()

Using a container unit as the flexible middle value inside clamp() (as shown above) is a common pattern: it keeps a sensible minimum and maximum size while letting the value scale smoothly with the container in between.

Why This Matters for Reusable Components

Container units complete the picture started by container queries: not only can layout react to a container's size, but typography and spacing values can scale continuously with it too, without any breakpoint jumps.