Skip to content
UX Atlas
TermCraft conventionFoundational

Container Query

A rule that responds to how much space a component actually has.

Definition

A CSS query that applies styles based on the size of an element's container rather than the viewport.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

In plain language

A rule that responds to how much space a component actually has.

Example

A card that becomes horizontal when its own width exceeds 28rem, whether it is in a sidebar or a main column.

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Deeper reading

The full entry behind this definition.

Nearby in the Atlas

Adjacent territory, found through shared tags rather than a stated link.