Skip to main content

Query container

The query container component establishes a container query context for responsive design. Use query container to define an element as a containment context, enabling child components or styles to adapt based on the container's size rather than viewport width.

Query containers support modern responsive patterns where components respond to their container dimensions, creating more flexible and reusable layouts. For static layouts that don't need to respond to container size, use stack or grid directly.

Query container uses inline-size containment only — block-size (height) queries aren't supported. Applying contain: inline-size can affect child elements that depend on their parent's intrinsic size, and not all component properties accept container query expressions.

Support
Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the query container component.

Anchor to containerName
containerName
string
Default: ''

A custom name for the container, used in container queries to target this container specifically. The value is added alongside the default name s-default.

Anchor to id
id
string

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Anchor to ExamplesExamples

Anchor to Apply responsive paddingApply responsive padding

Wrap content in a query container and use container query syntax in the padding property. This example applies larger padding when the container is wider than 500px.

Apply responsive padding

A rendered example of the query container component

Anchor to Adapt layout based on container sizeAdapt layout based on container size

Use container query syntax in the direction property of a stack to switch between horizontal and vertical layouts based on the container's width.

Anchor to Switch grid columns based on container widthSwitch grid columns based on container width

Use container query syntax in the gridTemplateColumns property of a grid to switch between a single column and two columns based on the container's width.

Anchor to Best practicesBest practices

  • Use container queries instead of viewport queries: Container queries make components responsive to their parent's size, which is more reliable than viewport width in extension contexts where your component doesn't control the full page.
  • Name containers for clarity: Set containerName when you have nested query containers so child components can target a specific ancestor.
  • Test at multiple sizes: Verify that your container query breakpoints produce good layouts at small, medium, and large container widths.
Was this page helpful?