CSS container queries: adapt a component to its own space

How the rule works

A case summary card appears in a wide dashboard column and a narrow sidebar. A viewport breakpoint cannot describe both positions at once. Declare the card's wrapper as a query container, use a stacked base layout, then arrange the card's children in two columns when that wrapper is wide enough. The queried container cannot style itself based on its own size through the query; the rule targets descendants. Inline-size containment can affect intrinsic sizing, so set up the wrapper intentionally and test it inside its actual grid track. The base layout remains useful on browsers that ignore the query.

.case-card-slot { container-type: inline-size; }
.case-card { display: grid; gap: .75rem; }
@container (min-width: 32rem) {
  .case-card { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

Cost and verification

Container queries avoid duplicating viewport exceptions for every placement. They still require style calculation and layout; measure a large list of cards before claiming a performance improvement. Test the component in both wide and narrow slots, with long labels and user zoom. If a nested child overflows, give it a shrink rule or wrapping behavior rather than increasing the query threshold blindly.

Common Mistakes

• Do not forget to establish a size query container.
• Do not expect a container query to style its queried element itself.
• Do not use a viewport breakpoint for a component whose width depends on placement.

Connected lessons

• Responsive CSS
• CSS media queries: change layout at a content failure point
• CSS grid tracks: reserve a sidebar without letting content widen the page
• Responsive CSS: keep reading order and controls usable

Related behavior decisions

• CSS container query units: size type to its component
• CSS container style queries: branch on a local token