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.

main {
  container: inline-size / name;
}

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

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

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.

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

.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; }
}

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.