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.

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

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

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

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

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

• CSS container queries
• @container at-rule
• CSS container shorthand property
• CSS container-name property
• CSS content-visibility property