@container | CSS-Tricks

The CSS @container at-rule lets us apply styles to other elements depending on a container’s size or styles. It works almost the same way as a traditional @media query but we are not limited to only querying the viewport.
To avoid headaches later, we can call a @container querying an element’s size a size query and a @container querying an element’s styles a style query.
<container-condition>: The conditions for the query, that when matched, will apply the styles defined inside. It’s composed of two parts:
<block-contents>: the styles for the container’s descendants, just like a @media query.
To query a container we first need one! More technically, we have to give an element a containment context, a way of saying to CSS that an element is query-able through the @container at-rule. The process will differ depending on which query type we want to write. In the case of a size query, we can give an element a size containment context using the container-type property with a value of:
We can also give it a name using the container-name property, so we can later specify which container we want to query. However, it isn’t strictly necessary:
Another way is using the container shorthand for both properties. All we do is separate the two values with a forward slash (/):
That’s all there is! Now that we have established the .parent as a container that we can query by its inline-size. In other words, we apply styles to any contained element when the .parent is a certain width. For example, we can apply flexbox to some .child element in the .parent container when the .parent is greater than 900px:
If we don’t specify the container’s name in the query, then the elements inside will match the closest ancestor in the cascade that has a containment context:
Both of the .child and .granchild elements in that example will match the .parent container. But let’s imagine for a moment that the .child was a container as well (and yes, containers):
Then .granchild would match the .child element
This isn’t necessarily a bad thing, but if we want to avoid it, we can specify the container we are using before the query condition:
To give an element a style containment we don’t have to do anything special; all elements have a style containment context by default. In the case of size queries, we have to manually give an element a size containment because it creates a new stacking context, which might catch you off guard if you’re not expecting it, and would be disastrous to apply it to each element by default. Style queries don’t worry about that since they just read the styles from your stylesheet.
To start with styles query, we can write our condition inside the style() wrapper function. There is only one catch, at the time of writing, we can only check for custom properties.
Custom properties inherit by default, so we can query them from distant ancestors:
Just like @media queries, we can mix several conditions using logical combinations (and, or, not), even combining size and style queries in one single at-rule:
It’s also possible to nest queries so we could have one general @container query condition and inside more specific queries:
Or nest a @container query inside other at-rules, like a @media query:
Here’s another one: make queries for multiple containers using a comma-separated list with each container:
This syntax is defined on the spec, but at the time of writing no browser offers support for it
Container queries expose some special units that are relative to the container’s size. We’ll outline those units below, but know that we also have a complete guide to CSS Length Units which includes information about container query units.
The following demo is an example of a responsive layout based on a parent container that is queried by its inline-size to apply styles to the elements inside of it. You can see how container queries can be a more accurate way to respond to the sizes of elements for a responsive layout than media queries, which are queries based on the viewport’s size.
CSS Container Queries are defined in the CSS Conditional Rules Module Level 5 specification, which is currently in Editor’s Draft status at the time of this writing.
Container Queries enjoy support across all major browsers!
But the same can’t be said about style queries, so be wary of support when using them and refer to the latest support:
We've got lots of ways to help you connect with the greatest front-end community in all the land.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Join our community of front-end nerds! You'll get into the Discord server and member-only perks and free swag.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Get your t-shirts, prints, stickers, and yes, even mousepads at the brand-spankin' new CSS-Tricks store, now open.
CSS-Tricks is powered by a small team of real-life humans.
Handwritten. Twice a month. No spam. See past issues →