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) |