Container Queries

Style an element by the width of its container instead of the viewport.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

Use Container Queries

Mark the parent with ct:is, then prefix a child's class with @c: & a breakpoint name. The class applies once the container, not the window, reaches that width.

<div className="ct:is">
  <h2 className="fs:md @c:sm:fs:xl">Recent files</h2>
</div>

The same card can sit in a narrow sidebar & a wide page and lay itself out for each, because it measures the space it is given.

Breakpoints

@c: takes every breakpoint name, including the ones you add with theme.screens.

Prefix	Container Width	CSS Rule
`@c:xs`	`32 rem` (512 px)	`@container (min-width: 32rem)`
`@c:sm`	`40 rem` (640 px)	`@container (min-width: 40rem)`
`@c:md`	`48 rem` (768 px)	`@container (min-width: 48rem)`
`@c:lg`	`64 rem` (1024 px)	`@container (min-width: 64rem)`
`@c:xl`	`80 rem` (1280 px)	`@container (min-width: 80rem)`
`@c:xxl`	`96 rem` (1536 px)	`@container (min-width: 96rem)`

Stacking

A container query stacks with any other variant, like every at-rule.

<a className="o:100 @c:md:h:o:80">Open folder</a>