0Pricing
CSS Academy · Lesson

Container Query Units: cqw cqh

Size elements relative to their query container using cqw, cqh, and related container units.

Container Query Units

CSS provides container-relative units that size values as percentages of the query container's dimensions — similar to viewport units (vw/vh) but relative to the component's container.

cqw — Container Query Width

1cqw = 1% of the container's inline size (width in horizontal writing). Scale typography and spacing relative to the component container.

.card-title {
  font-size: clamp(1rem, 3cqw, 2rem);
  /* scales with container width, bounded by min/max */
}

All lessons in this course

  1. container-type and container-name
  2. @container Rules and Breakpoints
  3. Container Query Units: cqw cqh
  4. Container Queries vs Media Queries
← Back to CSS Academy