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.
container-name
.element { container-name: cards-grid; }
container-type
.element { container-type: inline-size; }
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
