Question 1

What is a CSS container query?

Accepted Answer

A CSS container query (@container) lets you style elements based on the size of their parent container rather than the viewport. This makes truly reusable components possible — the same card looks right in a sidebar, a hero, or a tight grid.

Question 2

How do I use the cqi and cqw units?

Accepted Answer

cqi = 1% of the container's inline size (usually width), cqw = 1% of width, cqh/cqb for height/block, cqmin/cqmax for the smaller/larger of the two. They scale your paddings, font sizes and gaps with the container so components stay readable at any size.

Question 3

How do I make a container for @container queries?

Accepted Answer

Set container-type: inline-size on the parent element to enable width queries, or container-type: size for both axes. Optionally add container-name: myname so multiple containers don't conflict. Then write @container myname (min-width: 400px) { ... } rules.

Question 4

Which browsers support container queries?

Accepted Answer

Container queries are Baseline-supported since 2023 — Chrome 105+, Edge 105+, Safari 16+, Firefox 110+. The cqi/cqw/cqh/cqb units shipped alongside and work in the same versions.

⚙️ Container Setup

🎯 Presets

📐 Breakpoints

👁️ Live Preview (drag right edge ↔ to resize)

📦 Container Query Demo

📋 Generated CSS