Skip to main content

QueryContainer

Establishes a query container for responsive design. Use s-query-container to define an element as a containment context, enabling child components or styles to adapt based on the container’s size.

Anchor to propertiesProperties

Use to define an element as a containment context, enabling child components or styles to adapt based on the container’s size.

Anchor to containerName
containerName
string

The name of the container, which can be used in your container queries to target this container specifically.

We place the container name of s-default on every container. Because of this, it is not required to add a containerName identifier in your queries. For example, a @container (inline-size <= 300px) none, auto query is equivalent to @container s-default (inline-size <= 300px) none, auto.

Any value set in containerName will be set alongside alongside s-default. For example, containerName="my-container-name" will result in a value of s-default my-container-name set on the container-name CSS property of the rendered HTML.

Was this section helpful?
<s-query-container>
<s-box
padding="@container (inline-size > 500px) large-500, none"
background="strong"
>
Padding is applied when the inline-size '>' 500px
</s-box>
</s-query-container>

Preview