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 based mostly on the dimensions of the queried container.
cqiandcqbare just likevwandvh, however as a substitute of caring concerning the viewport, they care about their containers measurement.
cqiis your inline-size unit (normally width in horizontal writing modes), whereascqbhandles block-size (normally top).
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, lets say 50cqmax and that equals 50% of the container’s measurement, however it is going to 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 may well assist keep proportions should you suppose the writing mode would possibly change on you, reminiscent of shifting from horizontal to vertical.
