container

The container shorthand CSS property establishes the element as a query container and specifies the name or name for the containment context used in a container query.

Syntax

container: <container-name> / <container-type>;

<container-name>: A case-sensitive name for the containment context. More details on the syntax are covered in the container-name property page.
<container-type>: The type of containment context. More details on the syntax are covered in the container-type property page.

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

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

The explicit way to create a container context is to declare a container-type with an optional container-name:

.post {
  container-type: inline-size;
  container-name: sidebar;
}

The container shorthand is intended to make this simpler to define in a single declaration:

.post {
  container: sidebar / inline-size;
}

You can then target that container by name using the @container at-rule:

@container sidebar (min-width: 400px) {
  /* <stylesheet> */
}

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

Specification
CSS Containment Module Level 3 # container-shorthand

BCD tables only load in the browser