An element can be established as a query container using thecontainer-typeCSS property.container-type is used to define the type of container context used in a container query. The available container contexts are:

• Size: Enable selectively applying CSS rules to a container's children based on a general size or inline size condition such as a maximum or minimum dimension, aspect ratio, or orientation.
• Scroll-state: Enable selectively applying CSS rules to a container's children based on a scroll-state condition such as whether the container is a scroll container that is partially scrolled or whether the container is asnap target that is going to be snapped to its scroll snap container.

Syntax

/* Keyword values */container-type: normal;container-type: size;container-type: inline-size;container-type: scroll-state;/* Two values */container-type: size scroll-state;/* Global Values */container-type: inherit;container-type: initial;container-type: revert;container-type: revert-layer;container-type: unset;

Values

Thecontainer-type property can take a single value from the list below, or two values — one must bescroll-state and the other can beinline-size orsize. In other words, an element can be established as a size query container, a scroll-state query container, both, or neither.

inline-size

Establishes a query container for dimensional queries on theinline axis of the container.Appliesstyle andinline-size containment to the element. The inline size of the element can becomputed in isolation, ignoring the child elements (seeUsing CSS containment).

normal

Default value. The element is not a query container for any container size queries, but remains a query container forcontainer style queries.

scroll-state

Establishes a query container for scroll-state queries on the container. In this case, the size of the element is not computed in isolation; no containment is applied.

size

Establishes a query container for container size queries in both theinline and block dimensions.Appliesstyle andsize containment to the element. Size containment is applied to the element in both the inline and block directions. The size of the element can be computed in isolation, ignoring the child elements.

Formal definition

Formal syntax

container-type =
normal|
[[size|inline-size]||scroll-state]

Description

Container queries allow you to selectively apply styles inside a container based on conditional queries performed on the container. The@container at-rule is used to specify the tests performed on a container, and the rules that will apply to the container's contents if the query returnstrue.

The container query tests are only performed on elements with acontainer-type property, which defines the elements as a size or scroll-state container, or both.

Container size queries

Container size queries allow you to selectively apply CSS rules to a container's descendants based on a size condition such as a maximum or minimum dimension, aspect ratio, or orientation.

Size containers additionally have size containment applied to them — this turns off the ability of an element to get size information from its contents, which is important for container queries to avoid infinite loops. If this were not the case, a CSS rule inside a container query could change the content size, which in turn could make the query evaluate to false and change the parent element's size, which in turn could change the content size and flip the query back to true, and so on. This sequence would then repeat itself in an endless loop.

The container size has to be set by context, such as block-level elements that stretch to the full width of their parent, or explicitly defined. If a contextual or explicit size is not available, elements with size containment will collapse.

Container scroll-state queries

Container scroll-state queries allow you to selectively apply CSS rules to a container's children based on a scroll-state condition such as:

• Whether the container's contents are partially scrolled.
• Whether the container is a snap target that is going to be snapped to a scroll snap container.
• Whether the container is positioned viaposition: sticky and stuck to a boundary of ascrolling container.

In the first case, the queried container is the scroll container itself. In the other two cases the queried container is an element that is affected by the scroll position of an ancestor scroll container.

Examples

Establishing inline size containment

Given the following HTML example which is a card component with an image, a title, and some text:

<div>  <div>    <h3>Normal card</h3>    <div>      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod      tempor incididunt ut labore et dolore magna aliqua.    </div>  </div></div><div>  <div>    <h3>Wider card</h3>    <div>      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod      tempor incididunt ut labore et dolore magna aliqua.    </div>  </div></div>

To create a container context, add thecontainer-type property to an element.The following uses theinline-size value to create a containment context for theinline axis of the container:

.container {  container-type: inline-size;  width: 300px;  height: 120px;}.wide {  width: 500px;}

h3 {  height: 2rem;  margin: 0.5rem;}.card {  height: 100%;}.content {  background-color: wheat;  height: 100%;}.container {  margin: 1rem;  border: 2px dashed red;  overflow: hidden;}

Writing a container query via the@container at-rule will apply styles to the elements of the container when it is wider than 400px:

@container (width > 400px) {  .card {    display: grid;    grid-template-columns: 1fr 2fr;  }}

Specifications

Browser compatibility

See also

• CSS container queries
• Using container size and style queries
• Using container scroll-state queries
• @container at-rule
• CSScontainer shorthand property
• CSScontainer-name property
• CSScontent-visibility property