Recommended Free Tools
CSS container queries let a component change its styles based on the space its containing element provides, instead of the size of the browser window. A card that sits in a wide main column and the same card in a narrow sidebar can each lay itself out correctly from the same stylesheet. Container queries complement media queries: they answer “how much room does this component have here?”, while media queries still handle viewport, device, and user-preference conditions.
How container queries differ from media queries
A media query tests the viewport or the device. A size container query tests the dimensions of an ancestor that you have explicitly declared as a query container. Because the test is attached to the component’s surroundings rather than the page, the same component can respond correctly in layouts you have not yet built.
| Question | Media query | Container query |
|---|---|---|
| What is measured? | The viewport or device (for example, the browser window width) | The inline or block size of a declared ancestor container |
| What must be set up first? | Nothing beyond the @media rule |
An ancestor with size containment, usually container-type: inline-size |
| Typical use | Page-level navigation, device orientation, reduced-motion preferences | Reusable cards, sidebars, widgets that appear in several layouts |
| Can the rule reach the container itself? | Not applicable | No. The rule styles descendants of the container |
| Can the two be combined? | Yes | Yes |
Use a container query when the question is about the component’s available room. Keep a media query when the question is about the device or the user’s preferences.
How do I make a CSS query respond to a container’s width?
Follow these steps. The example uses a card that switches to a two-column layout once its wrapper is wider than 40rem.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- Declare the wrapper as a query container. Add
container-type: inline-sizeto the element that wraps the component. In horizontal writing modes this queries width; in other writing modes it follows the logical inline axis. - Put the styles on a descendant. The query applies to elements inside the container. The card in the example is a child of
.card-shell, not the wrapper itself. - Write the base layout first. Give the card a single-column default so it still works where container queries are unsupported.
- Add the
@containerrule. Change the layout only when the container passes the threshold.
.card-shell {
container-type: inline-size;
}
.card {
display: grid;
grid-template-columns: 1fr;
}
@container (width > 40rem) {
.card {
grid-template-columns: 1fr 2fr;
}
}Set the threshold from what the content needs, such as when a heading or image stops fitting comfortably. A breakpoint copied from a viewport layout is not a reliable component breakpoint, because the component may sit in a column much narrower or wider than the page.
Name the container when nesting makes the target unclear
An unnamed size query uses the nearest eligible ancestor. When components nest inside other query containers, that ancestor may not be the one you intend. Give the wrapper a name and refer to it explicitly:
.card-shell {
container: card-region / inline-size;
}
@container card-region (width > 40rem) {
.card {
grid-template-columns: 1fr 2fr;
}
}The container shorthand sets the name and the type together. The longhand properties are container-name and container-type.
Choosing the container type
The container type determines which dimensions you can query and how much containment the browser applies. Containment is not free: it changes how the element is sized and laid out, so use the least restrictive type that meets the need.
Free tools Windows power users keep installed
One-click scans. No signup required.
| Value | Dimensions you can query | Containment applied | When to choose it |
|---|---|---|---|
inline-size |
The logical inline dimension (width in horizontal writing modes) | Size containment on the inline axis | Most component layouts, where the decision depends on width |
size |
Both inline and block dimensions | Stronger size containment on both axes | Only when the layout must respond to height as well as width, and the container’s size can be fixed by its own rules |
Container query units
Container query units such as cqi and cqw size a value relative to the query container. They suit fluid adjustments, such as a heading that scales with its card, so you do not need a discrete breakpoint for every step:
.card-title {
font-size: clamp(1rem, 4cqi, 1.5rem);
}Units and @container rules work well together. Use units for smooth scaling and rules for structural changes such as switching from one column to two.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Browser support and fallbacks
MDN’s reference for the @container at-rule marks it as Baseline Widely available, with availability across browsers since February 2023. That date covers the at-rule’s core size queries. MDN also notes that some parts of the feature have varying support, so the statement does not extend to every query type.
- Size queries are the most established category and the one this article covers.
- Style, scroll-state, and anchored queries are newer. Check MDN’s compatibility table for the exact query form before relying on it in production.
- Fallbacks: MDN describes using grid or flexbox to produce a usable default layout, then adding media queries for viewport-based changes in browsers without container-query support.
Check the compatibility data for your own browser targets rather than relying on a version number from an older article.
Side effects of declaring a query container
Declaring a size query container adds containment. MDN explains that containment lets the browser avoid re-evaluating every element to see whether a query applies, and it helps prevent cyclic layout, where a descendant’s styles change the container’s own size and the layout must be recalculated. The trade-off is that the container’s sizing behaves differently, so an element that previously grew to fit its content may now take a different size. After adding a container, check the surrounding layout and confirm that nothing collapses or overflows.
Debugging container queries in Chrome DevTools
Chrome’s DevTools documentation describes several features that help when a query does not behave as expected:
- Query containers are marked in the Elements panel, so you can see which ancestors establish a container.
- You can overlay a container and its descendants on the page to check which elements the query affects.
- The Styles pane shows applicable
@containerdeclarations, with a link to the parent container that the rule is matched against.
If a rule does not apply, first check that the target is a descendant of the intended container and that the container has an eligible type. Then check whether a name is required to select the correct ancestor.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Standards status
The W3C’s CSS Containment Module Level 3 is published as a Working Draft. A Working Draft is work in progress, and the W3C notes that it may be updated, replaced, or made obsolete. Treat the specification as a living document: the browser behavior described in MDN’s reference is the practical guide, and the specification text is the authority on edge cases. Re-check the specification and compatibility tables before shipping features that depend on newer query categories.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchBest Value
In practice, container queries are a broadly available layout tool for size-based component styling. The main decisions are which container type to use, where the threshold should sit, and whether a fallback layout is acceptable for browsers that lack support.
Container queries are not a replacement for media queries. Use them for components that need to know their own room, and keep media queries for viewport, device, and preference conditions.
Sources: MDN Web Docs (@container reference and compatibility data); W3C, CSS Containment Module Level 3 (Working Draft); Chrome for Developers, DevTools documentation.
Note: Support details may change, and the statements above reflect MDN’s current reference as reviewed in October 2026.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
