Container queries enable you to apply styles to an element based on the size of the element’s container. While Media Queries ushered in an ethic of responsive design, it is not granular. The entire page has to go through the viewport breaking points, which is fine for the major design elements, but not so good for the many tweaks that go into designing a responsive web page. Finessing the design for different devices often requires many breakpoints. Container queries allow child elements to react to changes in their parent element size, making it possible to finesse every element of the page’s responsive design. You can now increase or decrease padding, change font sizes, add or remove background images, or completely change the display property and orientation of child elements, for example, based on the size of the parent.
How to set up the Parent/Container
- Target the element you wish to target as a containment query by using class or id.
- Set up the containment context for the element by setting the
container-typeproperty. The values aresize, which is the logical properties description that describes both height and width,inline-size, which means only width, andnormal, which means neither height nor width, but the element is a query container that can receive container style queries. Because we most often think in terms of width,inline-withis the easiest value to. - Name your container, using the
container-nameproperty. You can give it more than one name (separated by a space), in case you wish to target it with more than one @container rule. Chose an context appropriate name. - The container shorthand does both:
container: Charley / inline-size. - Finally, target the named container
@container Charley (min-width: 700px) { }It works just like media queries, so you already understand how to implement those, it is easy to style the child element definitions.The styles are applied when the conditions are true. - The container elements should be beneath the original style definitions describing the element, to override the existing style.
Container Queries specific measurements
Measurements for the viewport are standardized. How wide is it, how high is it, etc. Container queries have similar measurements requirements, and have corresponding measurements:
- cqw (container query width) – 1% of the container’s width
- cqh (container query height) – 1% of the container’s height
- cqi (container query inline) – 1% of the container’s inline size
- cqb (container query block) – 1% of the container’s block size
- cqmin (container query minimum) – the smaller value of cqi and cqb
- cqmax (container query maximum) – the larger value of cqi and cqb
That allows you to write, for example, a text size that varies in height depending on the parent’s size. font-size: clamp(2rem, 15cqi, 4rem); where the 15cqi refers to 15% of the container’s inline size. The clamp() function gives this a minimum value of 2rem, and a maximum of 4rem. In the meantime, if 15cqi is between these values, the text will shrink and grow correspondingly.
Self-Aware Modules
I can see container queries being used to build all kinds of self aware widgets that behave as you expect them to, no matter where they are placed. Container queries can be reused anywhere on the page without needing to know the actual size, as it will restyle itself to fit whatever space is allocated. As a designer, you think in modular patterns rather than pages, where responsive design is not thought of in regards to the device, but to all the other elements on the page.
See Container Queries in action
Click on the logo to go to CodePen to see it (in the upper right hand corner, where it says edit on CodePen)
See the Pen
CSS Container Queries Demo (+ polyfill) by Bramus (@bramus)
on CodePen.