container-type

Baseline 2023 *
Newly available

Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

An element can be established as a query container for container size queries using the container-type CSS property. container-type is used to define the type of size containment used in a container query.

Size containment 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.

The container size has to be set explicitly or by context — for example, block elements, flex containers, and grid containers stretching to the full width of their parent. If an explicit or contextual size is not available, elements with size containment will collapse.

Note: When using the container-type and container-name properties, the style and layout values of the contain property are automatically applied.

Syntax

css
/* Keyword values */
container-type: normal;
container-type: size;
container-type: inline-size;

/* Global Values */
container-type: inherit;
container-type: initial;
container-type: revert;
container-type: revert-layer;
container-type: unset;

Values

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.

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.

normal

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

Formal definition

Initial valuenormal
Applies toall elements
Inheritedno
Computed valueas specified
Animation typea color

Formal syntax

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

Examples

Establishing inline size containment

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

html
<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:

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

.wide {
  width: 500px;
}

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

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

Specifications

Specification
CSS Conditional Rules Module Level 5
# container-type

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
container-type
inline-size
normal
scroll-state
Experimental
size

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

See also