CodeWorlds
CSS propertyLayout and positioning

container-type

Turns an element into a container that @container rules can query for its size. Also covers container-name and the container shorthand.

Initial value
normal
Inherited
No
Animatable
no
Applies to
all elements
JavaScript
element.style.containerType = "inline-size"
On this page

Example

#
CSS
.widget {
  container: stat / inline-size;
}

.widget .chart {
  display: none;
}

@container stat (width >= 260px) {
  .widget .chart {
    display: flex;
  }
}
Preview

Both widgets share the same code. The chart only shows up in a container that’s at least 260px wide, so the narrow column shows just the number.

Definition and usage

#

The container-type property marks an element as a container for @container queries. Without it, @container rules have nothing to measure and simply never activate. The most common value is inline-size: the container then exposes its size along the inline axis, which in horizontal text means its width, and components inside it can adapt to that.

This convenience comes at a price. The size you can query can’t depend on the content, otherwise styles and size would chase each other in a loop. With inline-size, the container’s width stops being driven by its content, so an element that would normally size itself to its content, such as inline-block or float without a set width, can shrink to zero. With size, this applies to both dimensions, so you have to set the height yourself.

The container-name property gives the container a name, or even several names separated by spaces. The query @container name (…) then targets the nearest ancestor with that name, and a query without a name targets the nearest ancestor that is a container at all. The container: name / type shorthand sets both properties at once, for example container: sidebar / inline-size.

The queries themselves, the cqi units, and ready-made component patterns are covered in the @container entry. Here we focus on how to define a container and what to expect from it.

Syntax

#
Syntax
container-type: normal | size | inline-size;
container-name: none | <name>+;
container: <name> [ / <type> ]?;

Values

#

  • normal

    The element isn’t a container for size queries. The rule @container (width >= 260px) from the demo has nothing to refer to, so the card stays vertical even in a wide frame. This is the default value.

  • inline-size

    The frame exposes its width, and from 260px the card arranges itself horizontally. Drag the frame’s bottom-right corner to the left, and the card returns to a vertical layout.

  • size

    The container exposes both width and height, but its height stops being driven by its content. Without a set height, the frame collapses to just its padding, and the card disappears under overflow: hidden.

  • size + height

    with a set height

    With a fixed height, a size container works correctly, and queries can also check height. Shrink the frame vertically by dragging its corner, and the image disappears.

  • container: lesson / inline-size

    shorthand: name / type

    The shorthand sets a name and a type at once. The rule @container lesson only targets the container named lesson, and here it also changes the card’s background.

Values in practice

#

normal

The element isn’t a container for size queries. The rule @container (width >= 260px) from the demo has nothing to refer to, so the card stays vertical even in a wide frame. This is the default value.
.demo { container-type: normal; }

inline-size

The frame exposes its width, and from 260px the card arranges itself horizontally. Drag the frame’s bottom-right corner to the left, and the card returns to a vertical layout.
.demo { container-type: inline-size; }

size

The container exposes both width and height, but its height stops being driven by its content. Without a set height, the frame collapses to just its padding, and the card disappears under overflow: hidden.
.demo { container-type: size; }

size + height

With a fixed height, a size container works correctly, and queries can also check height. Shrink the frame vertically by dragging its corner, and the image disappears.
.demo { container-type: size; height: 150px; resize: both; }

@container (height < 110px) {
  .thumb { display: none; }
}

container: lesson / inline-size

The shorthand sets a name and a type at once. The rule @container lesson only targets the container named lesson, and here it also changes the card’s background.
.demo { container: lesson / inline-size; }

@container lesson (width >= 260px) {
  .card { background: #1e1b4b; }
}

Browser support

#

Widely available · since 2023

Works in all modern browsers, phones included. You can use it without worry.

  • Chrome
  • Edge
  • Firefox
  • Safari

Good practices

#
  • Make the container the wrapper around a component, for example a grid column or a layout slot, not the component itself. @container rules only style descendants of the container.
  • In the vast majority of cases, pick inline-size. The size type only makes sense when the container’s height is already fixed, for example in a panel with a set height.
  • Name containers after their role (sidebar, main, card). With nested containers, a query then won’t hit the wrong ancestor.

Related entries

#

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course
We use cookies to enhance your experience on the site
Privacy Policy
OK