container-type: preparing an element for size queries

Useful to know

container-type: inline-size establishes a container for size checks along its inline axis. In ordinary horizontal writing, this is the dimension we perceive as width. [1]

Example: .card-host { container-type: inline-size; }. After this rule, @container can change children according to the available space. When the same card stands in a narrow side panel, and in a wide column, the reaction to the container is more accurate than a reaction only to the screen. The declaration also introduces containment consequences; check the size of the wrapper rather than adding it randomly anywhere.