v150 · CSS · demo
A profile card that switches to compact mode when either the sidebar container is narrow or the main content container is narrow. One comma-separated @container rule replaces two identical duplicate rule blocks.
@container queries. In older browsers the compact layout rule only fires from one of the two containers.
Drag the sliders to resize the sidebar and main area independently · watch the profile card react to either
/* Without comma-separated queries — duplicate rule block needed */
@container sidebar (width < 160px) {
.profile-card { flex-direction: column; text-align: center; }
}
@container main (width < 300px) {
.profile-card { flex-direction: column; text-align: center; } /* duplicate! */
}
/* Chrome 150+ — comma separates multiple container queries (logical OR) */
@container sidebar (width < 160px), main (width < 300px) {
.profile-card {
flex-direction: column;
text-align: center;
}
/* fires when sidebar OR main is narrow — one rule, two triggers */
}Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗