Container Queries — Components That Adapt to Their Box

Media queries ask "how wide is the SCREEN?" — but a card in a sidebar needs to ask "how wide is MY SLOT?" Container queries answer that, making components truly reusable.

The syntax

/* 1. mark the container */
.card-slot { container-type: inline-size; }   /* watch its width */

/* 2. respond to IT, not the viewport */
.card { display: flex; flex-direction: column; }
@container (min-width: 400px) {
  .card { flex-direction: row; }      /* horizontal when the SLOT allows */
  .card img { width: 40%; }
}

Now the same card is vertical in a 300px sidebar and horizontal in an 800px main column — on the same page, automatically.

Container units

.card h3 { font-size: clamp(1rem, 5cqw, 1.5rem); }
/* cqw = 1% of container width — fluid type scoped to the component */

When to use which

• Media queries: page-level layout (sidebar visible? nav collapsed?)
• Container queries: component-level (card, widget, product tile)

Supported in all modern browsers. This is the biggest CSS layout upgrade since Grid — design systems are being rebuilt around it.