Container question models: cqi and cqb

Somewhat gem from Kevin Powell’s “HTML & CSS Tip of the Week” web site, reminding us that utilizing container queries opens up container question models for sizing issues primarily based on the scale of the queried container.

cqi and cqb are just like vw and vh, however as an alternative of caring concerning the viewport, they care about their containers measurement.

cqi is your inline-size unit (normally width in horizontal writing modes), whereas cqbhandles block-size (normally peak).

So, 1cqi is equal to 1% of the container’s inline measurement, and 1cqb is the same as 1% of the container’s block measurement. I’d be remiss to not point out the cqmin and cqmax models, which consider both the container’s inline or block measurement. So, let’s imagine 50cqmax and that equals 50% of the container’s measurement, however it’ll have a look at each the container’s inline and block measurement, decide which is bigger, and use that to calculate the ultimate computed worth.

That’s a pleasant sprint of conditional logic. It will possibly assist keep proportions should you suppose the writing mode may change on you, akin to shifting from horizontal to vertical.

---

Container question models: cqi and cqb initially printed on CSS-Tips, which is a part of the DigitalOcean household. It’s best to get the publication.