Container Units: Sizing Elements by Their Container
Container queries promise to change how we design responsive components: instead of making layout choices based on the viewport, we can make them based on the size of the container an element lives in. A component can adopt a row layout when its container is 600px wide, then switch to a column layout when that container narrows — without caring about the overall page width.
CSS already lets us size some things relative to a parent element using the % unit, but the match is strictly property-to-property. A width of 50% means 50% of the parent's width; a font-size of 50% means 50% of the parent's font-size. There's no way to express, say, font-size as a percentage of the parent's width. Container units fill that gap by giving us length units that reference the container's dimensions.
The draft spec defines a set of container-relative units:
| unit | relative to |
|---|---|
qw | 1% of a query container’s width |
qh | 1% of a query container’s height |
qi | 1% of a query container’s inline size |
qb | 1% of a query container’s block size |
qmin | The smaller value of qi or qb |
qmax | The larger value of qi or qb |
These units open up direct control across properties. You can set font-size to a percentage of the container's width, or use the same trick for line-height, gap, margin, or any other length-based property.
Early experimentation is already possible. Chrome Canary, with the container queries flag enabled, ships support for query units — Scott Jehl's explorations and Ahmad Shadeed's work both demonstrate practical use cases:
Query units can save us effort and time when dealing with things like
Ahmad Shadeedfont-size,padding, andmarginwithin a component. Instead of manually increasing the font size, we can use query units instead.
These units reduce the need for manual adjustment of component internals at different sizes. Instead of overriding padding or font-size at every breakpoint, one container-relative value can scale gracefully with the component itself.
Whether container queries and container units ship together remains to be seen — but the groundwork for both is clearly in motion.
