v150 · CSS · Container Queries

Multi-container Grid

A product card that stacks when either the sidebar container is narrow or the main container is narrow — one @container sidebar (…), main (…) rule covers both. Drag both sliders and watch the single rule fire from two different container contexts.

sidebar width

main region width (simulated)

500px

main query not triggered @container rule: inactive

📷

Camera

24MP mirrorless, interchangeable lens

$599

⌨️

Keyboard

Mechanical, TKL, hot-swap switches

$129

🖥

Monitor

27" 4K IPS, USB-C 90W

$349

code

.sidebar-region { container-type: inline-size; container-name: sidebar; }
.main-region    { container-type: inline-size; container-name: main; }

.product-card-inner {
  display: grid;
  grid-template-columns: 100px 1fr; /* horizontal by default */
}

/*
  Comma-separated @container — fires when EITHER condition is true.
  Before Chrome 150 this required two identical rule blocks.
*/
@container sidebar (max-width: 280px),
           main   (max-width: 340px) {
  .product-card-inner {
    grid-template-columns: 1fr; /* stack vertically */
  }
  .product-img {
    width: 100%;
    aspect-ratio: 2 / 1;
  }
}

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

code

see also

implementation reference