CSS Container Query Visualizer
@container responds to a parent container's width, not the viewport. Same card can sit in a sidebar or a full-width grid and adapt to whichever space it actually gets.
Configure
Drag to resize the parent. This is the size @container reads, not the viewport.
px
When the container is wider than this value, the card switches to a side-by-side layout.
Generated CSS
Modern CSS
Live Preview
Narrow layout
Reusable card
Same markup in a sidebar or a wide column. The layout follows the container width.
container-queries Browser Support
Widely availableSince 202393% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
105+
110+
16+
105+