Mastering CSS Container Queries: Enable, Configure, and Implement Responsive Layouts

In responsive design, media queries adjust styles based on viewport size, but they cannot react to changes in an element’s container size. CSS introduces Container Queries to address this limitation.

Enabling Container Queries in Chrome

Container Queries are not enabled by default in Chrome. Open

chrome://flags/#enable-container-queries

, locate the setting, and change it from

Default

to

Enabled

. The feature works in Chrome Dev 102.0.4972.0 and Chrome Canary 102.0.4982.0, but not in the stable 100.0.4896.60 release.

Key CSS Properties

The specification adds three properties:

container-type

,

container-name

, and the shorthand

container

. The

container

shorthand combines

container-type

and

container-name

to declare an element as a query container and define its type and name, separated by a slash.

Use

@container

to write container query rules, similar to media queries. Example: when the

<main>

element’s width is less than 800 px, the

<span>

inside changes its text color to gray.

<code>main {
  container: inline-size / name;
}

/* equivalent to:
   container-type: inline-size;
   container-name: name;
*/

@container name (max-width: 800px) {
  span {
    color: gray;
  }
}
</code>

The

container-type

property creates a container context. Supported types are:

size

: creates a query container for both block and inline dimensions.

inline-size

: creates a query container for the inline dimension.

block-size

: creates a query container for the block dimension.

style

: creates a query container for style queries.

state

: creates a query container for state queries.

container-name

assigns a name to the container; it is optional. The

@container

rule applies size and layout constraints to any element that meets the criteria, using syntax similar to media queries.

Demo Example

The following example shows a card layout that switches from side‑by‑side to stacked when the container width drops below 800 px.

<code>&lt;div class="content"&gt;
  &lt;div class="card"&gt;
    &lt;div class="qrcode"&gt;&lt;img src="https://s2.loli.net/2022/04/04/4VuT1aKLEZ3O6Mj.jpg"/&gt;&lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;div class="title"&gt;KooFE&lt;/div&gt;
      &lt;div class="about"&gt;介绍前端知识技巧，了解前端最新动态，欢迎大家关注！&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

.content {
  container-type: inline-size;
  resize: horizontal;
  overflow: hidden;
  background: #efefef;
}
.card {
  display: flex;
  width: 600px;
  margin: 8px;
  padding: 8px;
  border-radius: 4px;
  background: #ffffff;
}
.box { padding-left: 16px; }
.title { line-height: 36px; font-weight: 800; font-size: 20px; }
.content .about { padding-top: 8px; line-height: 24px; color: #666666; }

@container (max-width: 800px) {
  .card {
    width: 200px;
    flex-direction: column;
  }
  .box { padding: 0; }
  .about { display: none; }
}
</code>

Container Queries are still a Working Draft, and most browsers have not yet implemented the feature. When supported, they enable more flexible responsive designs and allow components to be more reusable.