Container query units

CSS course · Expert · Lesson 21/53

Learn cqw, cqh, cqi, cqb units.

Container query units

You know the viewport unit vw: one percent of the viewport width. Container query units work the same way, but they measure the container instead of the viewport.

Four core units: cqw is one percent of the container width, cqh of the height, cqi of the inline axis, cqb of the block axis. cqmin and cqmax return the smallest and largest value.

Use them for font size, padding and width, and the component scales with its container.

cqi vs cqw

cqw always measures the horizontal width of the container; cqi measures the inline axis. In horizontal layouts they are the same. But in vertical writing modes the inline axis flips; cqi follows that flip, while cqw stays fixed.

That is why multilingual designs with different writing directions prefer cqi. For a single language in horizontal layout, cqw is enough.

Exercise Scale font with cqi

Give the .widget selector container-type: inline-size. Then set font-size: 5cqi on the .widget h2 sub-selector. The heading scales with the container's inline axis: small in a narrow container, large in a wide one.

Show example solution

/* open the widget container */
/* heading grows with the container width */
.widget {
  container-type: inline-size;
}
.widget h2 {
  font-size: 5cqi;
}

Test yourself

Which unit scales with the container's inline axis?
- vw
- cqi
- cqb
- %
Show answer

cqi — Correct. cqi is one percent of the container's inline axis.

Write the unit

.widget h2 {
  font-size: 5____;
}

Show answer

.widget h2 {
  font-size: 5cqi;
}

Match units to axes

cqw

Container width
cqh

Container height
cqi

Inline axis
cqb

Block axis

All lessons in Expert

Container query units