W3cubDocs

/CSS

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

Values

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

Example

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.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
container 105 105 110 No 91 16 105 105 110 72 16 20.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/container