Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Based on viewport width
Same component looks different everywhere
Hard to reuse components
Based on container size
Component adapts to its space
Truly reusable components!
Mark parent as a container
.container {
container-type: inline-size;
/* or */
container-type: size;
}Respond to container size
@container (min-width: 400px) {
.card {
flex-direction: row;
}
}/* 1. Define container */
.sidebar {
container-type: inline-size;
container-name: sidebar;
}
/* 2. Query the container */
@container sidebar (min-width: 400px) {
.card {
display: grid;
grid-template-columns: auto 1fr;
}
}<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="demo">
<h1>📦 Container Query Demo</h1>
<div class="info">
⚡ This card adapts to its CONTAINER size, not viewport!
</div>
<div class="container">
<div class="card">
<div class="card-image">🎨</div>
<div class="card-content">
<h2>Container Query Card</h2>
<p>
I change my layout based on my container's width!
Drag the dashed border to resize me and watch the magic happen.
</p>
</div>
</div>
<div class="resize-handle">
← Drag the right edge to resize →
</div>
</div>
</div>
</body>
</html>Loading preview...
Queries width only (most common)
container-type: inline-size;Queries width AND height
container-type: size;Not a container (default)
container-type: normal;inline-size in 99% of cases. It's more performant and works for most layouts!Container queries come with new units that are relative to the container size!
cqw - 1% of container widthcqh - 1% of container heightcqi - 1% of container inline sizecqb - 1% of container block sizecqmin - smaller of cqi or cqbcqmax - larger of cqi or cqb/* Fluid typography based on container */
.card h2 {
font-size: clamp(1rem, 5cqi, 3rem);
}