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: cqw cqh is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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 */
}

cqh — Container Query Height

1cqh = 1% of the container's block size (height). Requires container-type: size (not just inline-size).

.hero-card {
  font-size: 4cqh;
  /* scales with container height */
}

cqi — Container Inline

cqi is an alias for cqw in horizontal writing — refers to the inline dimension specifically (not tied to horizontal).

cqb — Container Block

cqb is like cqh but dimension-relative — refers to the block size regardless of writing mode.

cqmin and cqmax

cqmin = 1% of the smaller container dimension. cqmax = 1% of the larger. Analogous to vmin/vmax.

.icon {
  width: 10cqmin;
  height: 10cqmin; /* always square, scales with smaller dim */
}

Fluid Typography in Components

Container units enable truly component-scoped fluid typography:

.card-wrapper {
  container-type: inline-size;
}

.card-title {
  font-size: clamp(1rem, 5cqw, 2.5rem);
  /* scales with card container, not viewport */
}

When to Use Container Units

Use container units when:

A component's text should scale with the component's width
Spacing inside a component should be proportional to its size
You want component-level fluid design independent of viewport

Container Units vs Viewport Units

The key difference: viewport units (vw, vh) reference the browser viewport. Container units (cqw, cqh) reference the nearest query container. This makes components truly portable — the same component looks proportionally correct in a 300px sidebar and a 900px main area.

Required: container-type

Container units only work when there is a container-type ancestor. Without one, the container query unit falls back to the small viewport unit (svw/svh).

Practical Pattern

A full component using container units:

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

.feature-title {
  font-size: clamp(1.25rem, 6cqw, 3rem);
  margin-bottom: 1cqw;
}

.feature-text {
  font-size: max(0.875rem, 2cqw);
  line-height: 1.5;
}

Quick Check

What does font-size: 5cqw produce in a component inside a 400px wide container?

Recap

Container query units (cqw, cqh, cqi, cqb, cqmin, cqmax) size values relative to the query container rather than the viewport. Use cqw for fluid typography that scales with component width. They require a container-type ancestor to work — without one, they fall back to viewport units.

Frequently asked questions

Is the “Container Query Units: cqw cqh” lesson free?

Yes — the full text of “Container Query Units: cqw cqh” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Container Query Units: cqw cqh”?

Size elements relative to their query container using cqw, cqh, and related container units. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Container Query Units: cqw cqh” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy