No Login Data Private Local Save

size‑container Demo - Online Intrinsic & Styled Queries

16
0
0
0

Live Container Preview

320px × auto
Adaptive Card

Hello, Container!

I change based on my container's size, not the viewport.

Use the sliders to resize the container and see the magic.

Container Settings

350
auto
Set to 0 for auto (content-based) height.
inline-size queries width only; size enables both width and height queries.
@container (min-width: 400px) { ... }

Frequently Asked Questions

Container queries allow you to style elements based on the size of their parent container, instead of the viewport size (like media queries). This enables truly reusable components that adapt to the space available to them.

Media queries respond to the viewport (browser window) dimensions. Container queries respond to a specific ancestor element. This gives components context‑aware styling regardless of where they are placed on the page.

inline-size establishes a container that supports queries on the inline axis (usually width). size enables queries on both the inline and block (usually height) axes. Use inline-size for most layout cases; size when you need height‑based rules.

Yes! CSS provides container query length units: cqw, cqh, cqi, cqb, cqmin, and cqmax. They are relative to the query container’s size, enabling precise proportional sizing inside components.

Styled container queries (@container style()) allow styling based on computed values of an ancestor (e.g., custom properties). This feature is still experimental and has very limited browser support at the moment.

Container queries are supported in all modern browsers (Chrome 105+, Edge 105+, Safari 16+, Firefox 110+). Check caniuse.com for the latest status.
🔧 Related Tools