Container

The Container utility creates a CSS container query context for responsive design. This modern approach to responsive design allows components to adapt based on their container's size rather than the viewport size, enabling more flexible and reusable components.

Usage

Apply the .container class to elements that should establish a container query context. This enables you to write CSS rules that respond to the container's dimensions using @container queries.

<div class="container">
  <div class="responsive-component">Content that adapts to container size</div>
</div>

The utility sets up the container with inline-size containment. It is unnamed by default; set --container-name when you need to target it from a named @container query. It also includes min-width: 0 to prevent overflow issues when content doesn't wrap properly.

Custom Properties