Container Queries Containment Module CSS Tutorial

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.

<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>