Widely availableA strong modern pattern for component-driven design systems and dashboards.
Responsive Design Widely available

Container queries

Container queries let a component respond to its own available space instead of the viewport. This makes reusable UI adapt more naturally when placed in different regions.

ResponsiveComponents

Overview

Container queries let a component respond to its own available space instead of the viewport. This makes reusable UI adapt more naturally when placed in different regions.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
container
105
105
110
16
105
16
DOM API
CSSContainerRule

The CSSContainerRule interface represents a single CSS @container rule.
105
105
110
16
105
16
containerName

The read-only containerName property of the CSSContainerRule interface represents the container name of the associated CSS @container at-rule.
111
111
110
17
111
17
containerQuery

The read-only containerQuery property of the CSSContainerRule interface returns a string representing the container conditions that are evaluated when the container changes size in order to determine if the styles in the associated @container are applied.
111
111
110
17
111
17
Other
css.at-rules.container

The @container CSS at-rule is a conditional group rule that applies styles to a containment context. Style declarations are filtered by a condition and applied to the elements within the container if the condition is true. The condition is evaluated when the queried container size, , or scroll-state changes.
105
105
110
16
105
16
css.properties.container-name

The container-name CSS property specifies a list of query container names used by the @container at-rule in a container query. A container query will apply styles to elements based on the size or scroll-state of the nearest ancestor with a containment context. When a containment context is given a name, it can be specifically targeted using the @container…
105
105
110
16
105
16
CSS property
none
105
105
110
16
105
16
Other
css.properties.container-type

An element can be established as a query container using the container-type CSS property. container-type is used to define the type of container context used in a container query. The available container contexts are:
105
105
110
16
105
16
CSS property
inline-size
105
105
110
16
105
16
normal
105
105
110
16
105
16
size
105
105
110
16
105
16
CSS type
container query length units

Container query length units `cqw`, `cqh`, `cqi`, `cqb`, `cqmin`, `cqmax`
105
105
110
16
105
16
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

Live demo

Narrow container

Container Queries Narrowcontainer demo.

PreviewFullscreen

Wide container

Container Queries Widecontainer demo.

PreviewFullscreen

containernamespecified

Container Queries containernamespecified demo.

PreviewFullscreen

Use cases

  • Reusable cards

    The same card can stack vertically in a sidebar and switch to a side-by-side layout in a wider main area.

  • Self-contained widgets

    Dashboard modules can adapt to the width of their panel without depending on page-level breakpoints.

Cautions

  • Only descendants respond to a query container, so plan your wrapper structure carefully.
  • Large layout changes across many nested containers can increase rendering cost and complexity.

Accessibility

  • Keep the same underlying content order as layouts shift so assistive technology receives a stable structure.

Related links

Powered by web-features