Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

CSS container query units: size type to its component

Last updated: 5 Oct 20265 min read
tutorial
BeginnerBy AITrove Editorial

Container query length units measure a percentage of an eligible query container rather than the viewport. The logical inline unit cqi follows writing direction; cqb follows block size. An absent eligible container makes the unit fall back to the small viewport for that axis.

When to use it

A case summary card is used in both a narrow queue and a wide dashboard. The title can grow with the card's inline size while staying inside a reviewed range. Give the outer wrapper container-type inline-size, and apply cqi only to descendants; a container cannot use its own size to determine its own font. The first declaration supplies a stable size when the later one is unsupported. The clamp bounds still matter when the card becomes unusually wide. Test the component in both placements, at 200 percent zoom, with a long translated title, and in a vertical writing mode if that mode is supported. Avoid cqb here: an inline-size query container does not necessarily expose a useful block size for this calculation. Container units are a sizing input, not a breakpoint or a guarantee that text will fit.

css
.case-summary { container-type: inline-size; }
.case-summary__title { font-size: 1.25rem; font-size: clamp(1.25rem, 3cqi, 1.8rem); overflow-wrap: anywhere; }

Cost and verification

The unit adds no network cost. The main cost is maintaining predictable results across embedded contexts: missing containment, nested query containers, zoom, and localization can change the computed value. Check the actual nearest eligible container in developer tools rather than assuming the viewport or a visually obvious parent is the reference. A bounded font size can still overflow if an unbroken identifier sits beside it, so permit wrapping where the content allows it. Container-type can change sizing behavior of the wrapper; validate the card's intrinsic width after adding containment. When support is absent, the fixed rem value remains readable rather than leaving the heading unstyled.

Common Mistakes

  • Do not apply cqi to a component before defining the intended query container.
  • Do not assume cqb measures a useful height on an inline-size-only container.
  • Do not omit a stable size and long-text test.

Connected lessons

css
reference
web
Storage details