Container queries adapt a component to an ancestor container’s available space. They fit components placed in differently sized page regions.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: A product card changes layout based on its container width rather than the whole viewport. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Choose the query owner
The component’s available parent space matters more than the whole viewport when used in several regions.
Step 2: Establish containment
Declare an inline-size query container on an appropriate wrapper around the component.
Step 3: Adapt internal layout
Use a container query for the card’s own arrangements, then test the same viewport with different wrapper widths.
Worked scenario
A product card changes layout based on its container width rather than the whole viewport.
.card-slot { container-type: inline-size; }
.card { display: block; }
@container (min-width: 30rem) {
.card { display: grid; grid-template-columns: 8rem 1fr; }
}The wrapper owns size containment; its descendant card responds to that space. The narrow sidebar and wide main column can therefore use different card layouts on one screen.
Common mistake
The query needs a correctly established query container; viewport assumptions may still leak into children.
Verify the behavior
Place cards in narrow and wide containers simultaneously. Confirm behavior follows container width rather than a coincidentally matching viewport breakpoint.
Interview exercise
Use a card in a sidebar.
Answer and reasoning
Define container ownership at the parent and query the relevant size, then test narrow and wide placements.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.