container-type

The container-type CSS property is used to define the type of containment used in a container query.

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 on both the inline and block axis in both the inline and block dimensions. Applies layout containment, style containment, and size containment to the container.

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.

normal

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

Note: to understand what happens when you apply layout, style, and size containment to a box, see the contain property.

Formal definition

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

Formal syntax

container-type = 
  normal       |
  size         |
  inline-size

Example

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">
    <img src="image.png" alt="Cat with two different color eyes" />
    <h2>Card title</h2>
    <p>Card content</p>
  </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;
}

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: 2fr 1fr;
  }
}

For more information on container queries, see the CSS Container Queries page.

Specifications

Specification
CSS Containment Module Level 3
# container-type

Browser compatibility

BCD tables only load in the browser

See also