container-type

The container-type property can take a single value from the list below, or two values — one of which must be scroll-state and the other can be inline-size or size. In other words, an element an 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 the inline axis of the container. Applies layout, style, and inline-size containment to the element.

Inline size containment is applied to the element. The inline size of the element can be computed in isolation, ignoring the child elements (see Using CSS containment).

normal

Default value. The element is not a query container for any container size queries, but remains a query container for container 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 the inline and block dimensions. Applies layout containment, style containment, and size containment to the container.

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.

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

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 returns true.

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

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 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 snapped to a scroll snap container.
• Whether the container is positioned via position: sticky and stuck to a boundary of a scolling 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.

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

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

<div class="container wide">
  <div class="card">
    <h3>Wider card</h3>
    <div class="content">
      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 the container-type property to an element. The following uses the inline-size value to create a containment context for the inline 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 (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

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