Container Queries

Apply styles based on the size of a parent container.

Usage

Container queries allow you to change styles based on the size of a parent container rather than the viewport. They use the @ prefix & require a containment context to function.

Define a Container

Use the ct-is or ct-s utility to mark an element as a container. This enables its children to use container query variants.

<div class="ct-is">
  <!-- Children can now use container queries -->
</div>

Apply Styles

Once the container is defined, children can use @ variants to respond to the container's width.

<div class="ct-is">
  <div class="d-g g-1 @md:g-2">
    <!-- Grid gap changes based on container size -->
  </div>
</div>

Breakpoints

Container query breakpoints reference:

Prefix	Min Width	CSS Rule
`@sm`	`40 rem` (640 px)	`@container (width >= 40 rem)`
`@md`	`48 rem` (768 px)	`@container (width >= 48 rem)`
`@lg`	`64 rem` (1024 px)	`@container (width >= 64 rem)`
`@xl`	`80 rem` (1280 px)	`@container (width >= 80 rem)`
`@xxl`	`96 rem` (1536 px)	`@container (width >= 96 rem)`