A little [gem](https://html-css-tip-of-the-week.netlify.app/tip/cqi-and-cqb/) from Kevin Powell’s [“HTML & CSS Tip of the Week”](https://html-css-tip-of-the-week.netlify.app) website, reminding us that using container queries opens up container query units for sizing things based on the size of the queried container.

> `cqi` and `cqb` are similar to `vw` and `vh`, but instead of caring about the viewport, they care about their containers size.
>
> `cqi` is your inline-size unit (usually width in horizontal writing modes), while `cqb`handles 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](https://css-tricks.com/container-query-units-cqi-and-cqb/) originally published on [CSS-Tricks](https://css-tricks.com), which is part of the [DigitalOcean](https://try.digitalocean.com/css-tricks/?utm%5Fmedium=rss&utm%5Fsource=css-tricks.com&utm%5Fcampaign=family%5F&utm%5Fcontent=) family. You should [get the newsletter](https://css-tricks.com/newsletters/).