Container Query Units — cqw, cqi, cqb, cqmin, cqmax

Container Query Length Units

CSS introduces new length units relative to the container's dimensions, similar to viewport units (vw, vh) but scoped to the nearest container with size containment.

The Units

Unit	Meaning	Equivalent
cqw	1% of container width	Like vw but for containers
cqh	1% of container height	Like vh but for containers
cqi	1% of container inline size	Writing-mode aware width
cqb	1% of container block size	Writing-mode aware height
cqmin	Smaller of cqi and cqb	Like vmin for containers
cqmax	Larger of cqi and cqb	Like vmax for containers

Fluid Typography

.text-container {
  container-type: inline-size;
}

.fluid-heading {
  font-size: clamp(1rem, 5cqi, 3rem);
}

.fluid-body {
  font-size: clamp(0.875rem, 2.5cqi, 1.25rem);
}

The clamp() function sets minimum and maximum bounds while cqi provides the fluid middle value. The text scales smoothly with the container width.

Fluid Spacing

.card {
  padding: clamp(0.5rem, 3cqi, 2rem);
  gap: clamp(0.5rem, 2cqi, 1.5rem);
}

Fluid Layout Dimensions

.avatar {
  width: clamp(40px, 10cqi, 100px);
  height: clamp(40px, 10cqi, 100px);
}

Requirements

Container query units work with any element that has an ancestor with container-type: inline-size or container-type: size. You do not need an explicit @container rule to use these units -- they scale continuously.

Browser Support

Container query units are supported in Chrome 105+, Firefox 110+, Safari 16+, and Edge 105+ -- the same browsers that support container queries.