Learn the concept
Container Queries (@container)
Container queries (@container) let you style elements based on the size of their parent container rather than the viewport. This enables truly reusable components that adapt to wherever they're placed, unlike media queries which only respond to the browser window size.
The problem with media queries:\nMedia queries respond to the viewport width. A card component styled for mobile at 400px viewport works fine — but if you place that same card in a narrow sidebar at 300px on a 1440px desktop, the media query doesn't help. The viewport is still wide.\n\nContainer queries solve this:\n- Style based on the parent container's size, not the viewport\n- Components become truly self-contained and reusable\n- A card can be responsive regardless of where it's placed\n\nSyntax:\n1. Define a containment context:\n - container-type: inline-size (queries block-axis, e.g., width)\n - container-type: size (queries both axes, e.g., width and height)\n2. Query it: @container (min-width: 400px) { ... }\n3. Optionally name it: container-name: card-wrapper\n\nContainer query units:\n- cqw — 1% of container width\n- cqh — 1% of container height\n- cqi — 1% of container inline size\n- cqb — 1% of container block size\n\nBest Practices:\n- Complement Media Queries: Use container queries for component-level responsiveness and media queries for global page layouts.\n- Prioritize Accessibility: Ensure content remains accessible across all container sizes.\n- Mind Performance: Use containers only where necessary to avoid over-nesting.\n- Avoid Styling What You Query: A container cannot query its own styles; query its content.\n\nBrowser support: All modern browsers (Chrome 105+, Firefox 110+, Safari 16+)
/* 1. Define containment context */
.card-wrapper {
container-type: inline-size;
container-name: card;
}
/* 2. Default: stacked layout (narrow) */
.card {
display: grid;
gap: 1rem;
}
/* 3. Side-by-side when container is wide enough */
@container card (min-width: 400px) {
.card {
grid-template-columns: 200px 1fr;
}
}
@container card (min-width: 600px) {
.card {
font-size: 1.5rem;
}
}
/* Works anywhere: sidebar, main content, modal */
/* The card adapts to its container, not the viewport */Such as a 'Product Card' that needs to adjust its layout (e.g., stacking elements vertically or horizontally) based on the available width of the container it's placed in, rather than the overall viewport size.
Where individual widgets (e.g., charts, data tables) must adapt their internal presentation to fit the varying sizes of their parent panels, regardless of the browser window size.
Where an article component can change its typography, image placement, or column structure when rendered in a narrow sidebar versus a wide main content area.
Design a product card component that uses container queries to change its internal layout (e.g., image and text arrangement) based on its own width.
Build a dashboard with several widgets that independently adapt their content and layout using container queries as the dashboard panels are resized.
Material Design components are often built with internal responsiveness in mind, and container queries enable these components to adapt gracefully to various contexts and parent sizes, fostering reusability across Google's ecosystem.
Shopify's admin interface and merchant stores leverage container queries for building highly flexible and customizable sections, allowing merchants to arrange content blocks that respond intelligently to their allocated space.