CSS Container Queries

Container queries let a component react to the size of its own containing region, even when the overall browser is wide.

Declare container-type: inline-size on a parent. Then use @container (min-width: 320px) to change styles for descendants when that parent is at least 320px wide.

Queries evaluate an eligible ancestor, not the same element declaring container-type. This makes components reusable in dashboards, sidebars and article columns.

The parent establishes an inline-size query container; its child receives extra rules only when the container—not viewport—is wide enough.

A narrow host shows the component in one column.

HTML

<div class="component-host narrow"><article class="feature"><strong>Saved places</strong><p>Find trips you bookmarked.</p></article></div>

CSS

.component-host { container-type: inline-size; width: min(100%, 260px); padding: 8px; background: #f1f5f9; box-sizing: border-box; } .feature { display: grid; gap: 8px; background: #dbeafe; padding: 12px; border-radius: 8px; } .feature p { margin: 0; } @container (min-width: 320px) { .feature { grid-template-columns: 1fr 1fr; } }

Rendered output

Observe: The query does not match because the host is narrower than 320px.

Use the same component rules in a wider host.

HTML

<div class="component-host wide"><article class="feature"><strong>Saved places</strong><p>Find trips you bookmarked.</p></article></div>

CSS

.component-host { container-type: inline-size; width: min(100%, 460px); padding: 8px; box-sizing: border-box; background: #f1f5f9; } .feature { display: grid; gap: 8px; background: #ccfbf1; padding: 12px; border-radius: 8px; } .feature p { margin: 0; } @container (min-width: 320px) { .feature { grid-template-columns: 1fr 1fr; align-items: center; } }

Rendered output

Observe: When the parent has 320px available, the feature switches to two columns.

The parent establishes an inline-size query container; its child receives extra rules only when the container—not viewport—is wide enough.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Container queries require a suitable ancestor container, not just @container by itself.

• The query container cannot query its own size to restyle itself in this pattern.

Put the wide component inside a narrower parent and notice when the two-column rule stops matching.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Prefer container queries for reusable components whose placement changes independently of the page.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.