container

Avatar of Geoff Graham
Geoff Graham on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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.

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.

Browser support

Data on support for the css-container-queries feature across the major browsers from caniuse.com

More on Container Queries