v150 · CSS · demo

Fallback Layout

The same article card sits in two different containers. A single comma-separated @container rule makes both go compact when their container is narrow — no duplicate blocks.

Sidebar container
Main container
📐

Responsive Components

One card, multiple contexts — the comma query covers both.

Checking...
/* ✅ Comma-separated — one rule, two containers */
@container sidebar (max-width: 280px),
           main (max-width: 280px) {
  .card-inner {
    grid-template-columns: 1fr;  /* stack vertically */
  }
}

/* ❌ Old way — duplicate blocks needed */
@container sidebar (max-width: 280px) {
  .card-inner { grid-template-columns: 1fr; }
}
@container main (max-width: 280px) {
  .card-inner { grid-template-columns: 1fr; }
}

see also

implementation reference

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