container Queries Containment Module CSS Tutorial
container Queries tutorial. Best Practice: Use container queries for reusable, responsive components without relying on global viewport breakpoints.
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>