What sets the container for cqw?

The nearest ancestor with container-type: inline-size or size. Without a query container, cqw falls back to the small viewport.

Are container query units widely supported?

Yes—cqw, cqh, cqi and friends ship in all current major browsers. Provide a sensible fallback for very old versions.

Is px to cqw converter free to use?

Yes. UnitCraft calculators are free and run entirely in your browser.

Does UnitCraft send my input values to a server?

No. Calculator inputs are processed locally in the browser tab.

Can I copy the generated CSS output?

Yes. Each tool provides copy-ready snippets so you can paste values directly into code.

Converter · CSS unit tool

PX to CQW converter

cqw = (px ÷ containerWidth) × 100. 1cqw is 1% of the query container's width, so 40px inside a 400px container is 10cqw. Container units let a component size itself by its own box, not the viewport.

Container width

Pixels

Result

20.0000 cqw

120px ÷ 600px × 100 = 20.0000cqw

CSS snippet

css

width: 20.0000cqw;

Keyboard tip: press Tab or Shift+Tab to switch fields.

The PX to CQW formula

Divide the pixel value by the container's width and multiply by 100: cqw = (px ÷ containerWidth) × 100. The container is the nearest ancestor with `container-type: inline-size` (or `size`).

Reference inside a 400px container: 20px = 5cqw, 40px = 10cqw, 80px = 20cqw, 200px = 50cqw.

Why container units beat viewport units

A card in a sidebar and the same card in a wide main column should look different—but they share the same viewport. Container units decouple sizing from the viewport so a component adapts to wherever it is placed.

Pair cqw with `@container` rules to ship truly reusable components: one card that scales its padding, type, and gaps to its own width.

Copy-ready examples

Self-scaling card

css

.wrap { container-type: inline-size; }
.card-title { font-size: clamp(1rem, 4cqw, 1.5rem); }

Frequently asked questions

What sets the container for cqw?: The nearest ancestor with container-type: inline-size or size. Without a query container, cqw falls back to the small viewport.
Are container query units widely supported?: Yes—cqw, cqh, cqi and friends ship in all current major browsers. Provide a sensible fallback for very old versions.
Is px to cqw converter free to use?: Yes. UnitCraft calculators are free and run entirely in your browser.
Does UnitCraft send my input values to a server?: No. Calculator inputs are processed locally in the browser tab.
Can I copy the generated CSS output?: Yes. Each tool provides copy-ready snippets so you can paste values directly into code.