Media queries served us well, but they have a blind spot: they only know the size of the viewport, not the space a component actually sits in. Container queries fix that, and they’re a game changer for WordPress block and theme design.
The Problem With Viewport-Only Responsiveness
Imagine a card component. In a full-width section it has room to spread out; in a narrow sidebar it’s cramped. With media queries, the card only knows the browser width, so it can’t tell the difference. You end up writing fragile, context-specific overrides.
How Container Queries Work
A container query lets an element respond to the size of its nearest containing element instead of the screen. You declare a containment context on the parent, then write queries against that container’s width.
.card-wrapper {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card { display: grid; grid-template-columns: 1fr 2fr; }
}Now the card rearranges itself based on its own width, whether that’s in a wide hero or a narrow column.
Using Container Queries in WordPress Blocks
Theme.json and Custom CSS
Block themes let you add custom CSS through theme.json or block stylesheets. Wrap your block’s markup in a container context and your block becomes self-aware, adapting wherever an editor drops it.
Reusable Patterns
This is the real win for WordPress: patterns and reusable blocks get placed in unpredictable layouts. Container queries make a single block design behave correctly in a sidebar, a three-column grid, or a full-width row without separate variations.
Browser Support and Fallbacks
Container queries are supported across all modern browsers, but always provide a sensible default outside the query. Design the base styles to work at the smallest size, then enhance as the container grows. That progressive approach keeps older browsers usable.
Container Query Units
Alongside the queries, you get container query units like cqi (container inline size). These let typography and spacing scale relative to the container, which is perfect for components that need to feel proportional in any context.
.card h3 { font-size: clamp(1rem, 4cqi, 1.5rem); }Practical Tips for WordPress Designers
- Name your containers so queries stay readable across a large theme
- Avoid setting containment on elements that need to size to their content height
- Test blocks in multiple column layouts inside the editor, not just the front end
Final Thoughts
Container queries move WordPress design from page-level thinking to component-level thinking. When each block knows how to adapt to its own space, your patterns become genuinely reusable and your layouts stop breaking in unexpected places. It’s the responsive model the block editor was waiting for.