Layout

Container queries

Widely availablesince Aug 2025

Replaces: Media queries that guess at a component’s width from the viewport. The component asks its own container instead, so the same card works in a sidebar and in a hero.

See it working

Drag my corner

At 360px of my own width I go side by side. The window never changed.

The syntax

.card-wrap { container-type: inline-size; }

@container (min-width: 360px) {
  .card { grid-template-columns: 140px 1fr; }
}

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable

For browsers without it

Write the narrow layout as the default and let the query add the wide one. A browser without container queries keeps the stacked card, which is a complete design, not a broken one.

Before you ship it

container-type: size can collapse the element

Size containment tells the browser the element is sized without looking at its contents, so an element with no height of its own collapses to nothing. Use inline-size unless you really are querying height. Source