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

When is a container query better than a media query?

Short interview answer

Use a container query when a reusable component should adapt to the space its containing layout gives it. Use media queries for viewport-wide composition or device and user capabilities such as hover and reduced motion.

Example

CSS
.card-list { container-type: inline-size; }
@container (min-width: 400px) {  .card { grid-template-columns: 120px 1fr; } /* reacts to the list, not the screen */}

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