This content originally appeared on CSS-Tricks and was authored by Geoff Graham
A little gem from Kevin Powell’s “HTML & CSS Tip of the Week” website, reminding us that using container queries opens up container query units for sizing things based on the size of the queried container.
cqiandcqbare similar tovwandvh, but instead of caring about the viewport, they care about their containers size.
cqiis your inline-size unit (usually width in horizontal writing modes), whilecqbhandles block-size (usually height).
So, 1cqi is equivalent to 1% of the container’s inline size, and 1cqb is equal to 1% of the container’s block size. I’d be remiss not to mention the cqmin and cqmax units, which evaluate either the container’s inline or block size. So, we could say 50cqmax and that equals 50% of the container’s size, but it will look at both the container’s inline and block size, determine which is greater, and use that to calculate the final computed value.
That’s a nice dash of conditional logic. It can help maintain proportions if you think the writing mode might change on you, such as moving from horizontal to vertical.
Container query units: cqi and cqb originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
This content originally appeared on CSS-Tricks and was authored by Geoff Graham
Geoff Graham | Sciencx (2025-02-06T15:29:35+00:00) Container query units: cqi and cqb. Retrieved from https://www.scien.cx/2025/02/06/container-query-units-cqi-and-cqb/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.