Skip to content
FrontendHaltFrontendHalt
CSS·Intermediate·Coding·1 min read

How do you establish a query container?

Short interview answer

Set container-type, commonly inline-size, on the intended ancestor and optionally give it a container-name. Descendant @container rules then query that container's size or styles according to the query type.

Example

CSS
.sidebar { container: sidebar / inline-size; }
@container sidebar (min-width: 300px) { .widget { display: flex; } }

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to Responsive design and container queries

Related questions