Container | CSS-Tricks

The CSS container property is a shorthand that combines the container-name and container-type properties into a single declaration.

.parent {
  container: cards-grid / inline-size;

  /* Equivalent to: */
  container-name: cards-grid;
  container-type: inline-size;
}

Constituent properties

The container property is a shorthand for the following properties.

Almanac on May 22, 2024

container-name

.element { container-name: cards-grid; }

container-queries

Geoff Graham

Almanac on May 22, 2024

container-type

.element { container-type: inline-size; }

container-queries

Geoff Graham

Syntax

container: <'container-name'> [ / <'container-type'> ]?

Initial value: none / normal
Applies to: All elements
Inherited: No
Percentages: N/A
Computed value: As specified
Canonical order: Per grammar
Animation: Not animatable

If <'container-type'> is omitted, it is reset to its initial value of normal which defines a style container instead of a size container. In other words, all elements are style containers by default, unless we explicitly set the container-type property value to either size or inline-size which allows us to query a container’s size dimensions.

Specification

The container property is defined in the CSS Containment Module Level 3 specification, which is currently in Editor’s Draft status at the time of this writing.