CSS Container Queries allows components to respond to changes based on their container size rather than viewports, solving the limitations of traditional media queries in component development. ① Define the parent element as a query container and name it by setting container-type: inline-size or abbreviated container: card / inline-size; ② Use the @container card (min-width: 400px) syntax to apply styles when the container width reaches the specified conditions, so as to switch from vertical layout to horizontal layout; ③ This mechanism enables the same component to be adaptively displayed in different containers, suitable for grid layout, component library and CMS systems; ④ As of mid-2024, Chrome 105, Safari 16.4, and Edge 105 have been supported, and Firefox 110 needs to enable experimental functions. It is recommended to check compatibility with Can I Use. Use container and @container correctly to build responsive UI components that are truly adaptive containers.

CSS Container Queries is a mechanism for components to respond to changes based on the size of their container rather than the entire viewport. Compared with traditional media queries ( @media ), container queries are more suitable for building reusable responsive components.

Here is a simple CSS Container Queries example showing how to use it to create a card component that determines the layout based on the container width.

? Basic usage example: card layout switching

HTML

 <div class="card-container">
  <div class="card">
    <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="example picture" />
    <div class="content">
      <h3>Title</h3>
      <p>This is a descriptive paragraph. </p>
    </div>
  </div>
</div>

<div class="card-container wide">
  <div class="card">
    <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="example picture" />
    <div class="content">
      <h3>Another title</h3>
      <p>This text is displayed as a horizontal layout in a wider container. </p>
    </div>
  </div>
</div>

CSS

 /* Step 1: Define a container (the key to enabling container query) */
.card-container {
  container-type: inline-size; /* Enable width-based container query*/
}

/* Or use abbreviated syntax (recommended) */
.card-container {
  container: card / inline-size; /* A container named 'card', listening for inline orientation dimensions*/
}

/* Default narrow version: vertical stacking*/
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  font-family: sans-serif;
}

.card img {
  width: 100%;
  height: auto;
}

.card .content {
  padding: 16px;
}

/* When container width >= 400px, switch to horizontal layout*/
@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card img {
    width: 50%;
    height: auto;
  }

  .card .content {
    padding: 20px;
  }
}

? Explain the key points

• container-type: inline-size;
  Indicates that the element becomes a query container that only listens to its inline orientation dimensions (usually width).

  

• container: card / inline-size;
  It is abbreviated syntax, and the container is named card , which makes it easier to distinguish different containers in multiple queries.

• @container card (min-width: 400px)
  The style inside takes effect only if the container width named card is ≥ 400px.

  

• No longer relying on screen width, but the width of the component parent container - more suitable for component development (such as different performance in the sidebar or main content area).

? Practical application scenarios

• Cards in grid layout automatically adjust the display method according to the column width
• Responsive packages such as button groups and navigation bars that can be reused in the component library
• In CMS or layout systems, the same component takes different shapes in different regions

?? Browser Compatibility (as of mid-2024)

Support is good, but attention should be paid to:

• Chrome 105 ?
• Firefox 110 (requires enabled layout.css.container-queries.enabled ) ??
• Safari 16.4 ?
• Edge 105 ?

Can I Use - Container Queries

Basically that's it. With container and @container well, you can write out UI components that are truly “adaptive containers”, not just “adaptive screens”.

The above is the detailed content of css container queries example. For more information, please follow other related articles on the PHP Chinese website!