Container Queries Containment Module CSS Tutorial
Published : October 29, 2025Last Edited : November 24, 2025
Author : Adam Khoury
In modern web development, creating reusable, context-aware components is essential. For years, we relied on Media Queries to adjust layouts based on the overall viewport (browser window) size. But what if a component needs to look different in a narrow sidebar versus a wide main content area, even on the same screen size?
What are Container Queries?
The @container at-rule allows you to apply styles to an element based on the size or other characteristics of its parent container, not the entire viewport. This shift—from a page-level (macro) view to a component-level (micro) view—is a paradigm change that fundamentally improves responsive design.
example.html<style>
body{ font-family: Arial; }
input{ margin: 30px 0px; }
.container1 {
container-type: inline-size; /* Browser listens for container width changes */
width: 60%;
border: 4px dashed #ccc;
padding: 10px;
}
.inner-wrap {
display: flex;
flex-direction: row; /* Horizontal Layout */
}
.inner-wrap > div {
flex: 1;
margin: 10px;
background: #d4e6f6;
border-radius: 8px;
padding: 25px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transition: all 0.3s;
}
@container (max-width: 600px) {
.inner-wrap {
flex-direction: column; /* Vertical Layout */
}
.inner-wrap > div {
background: #d4f69f;
}
}
@container (max-width: 400px) {
.inner-wrap {
flex-direction: column; /* Vertical Layout */
}
.inner-wrap > div {
background: #f69fc3;
padding: 10px;
}
}
</style>
<h1>@container Queries</h1>
<h2>https://www.w3.org/TR/css-contain-3/</h2>
<h3>Best Practice: Use container queries for reusable, responsive components without relying on global viewport breakpoints.</h3>
<input type="range" id="widthSlider" min="200" max="800" value="800"
oninput="c1.style.width = this.value + 'px';">
<div class="container1" id="c1">
<div class="inner-wrap">
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
</div>