Container Units
Overview
If Viewport Units (vw, vh) scale elements based on the entire screen, Container Units (cqw, cqh) scale elements based on their specific Container Query parent. This is groundbreaking. It allows you to create completely fluid typography and padding that perfectly scales up or down based on the physical box the component is placed in, making true 'drag-and-drop' responsive components possible.
Syntax
/* Register the container */
.widget-box {
container-type: inline-size;
width: 100%;
}
/*
Use Container Units (cqw = Container Query Width)
1cqw = 1% of the container's width!
*/
.widget-title {
/* The font size is exactly 5% of the container's width */
font-size: 5cqw;
}
.widget-padding {
/* Responsive padding purely based on the parent's size */
padding: max(10px, 2cqw);
}Common Pitfalls
- Using
cqwwithout a registeredcontainer-typeparent. If an element tries to usecqwbut cannot find a registered container ancestor, it silently falls back to using standard viewport units (vw), which will completely break the intended component scalability. - Overusing fluid container typography. If you set a font size to
10cqw, and drop it into a massive full-screen container, the text will become cartoonishly large. ALWAYS wrap container units inside aclamp()function.
Interview Questions
cqw and cqi?cqw is explicitly the physical Container Query Width. cqi is the Container Query Inline-axis. In English (Left-to-Right), they are identical. But in vertical languages (like Japanese), cqi intelligently rotates to track the vertical axis instead.
Real-World Example
A bulletproof fluid headline that scales based on its box, not the screen.
/*
Floor: 1rem (Never unreadable)
Scaler: 4% of the container's width
Ceiling: 2.5rem (Never cartoonish)
*/
.modular-headline {
font-size: clamp(1rem, 4cqw, 2.5rem);
}Check Your Knowledge
Test your understanding of Container Units with these quick questions.