CSS Container Queries: Responsive Components, Not Just Pages

I hit the wall that container queries were built to solve on a Laravel dashboard I shipped last year: the same product-card component looked perfect in the main grid, then squished into a mess the moment I dropped it into a narrow sidebar on the same viewport. Media queries couldn't help — the viewport hadn't changed, only the card's container had. I ended up shipping two nearly-identical CSS classes just to make it work. If container queries had been in my toolbelt, that whole hack would have collapsed into six lines. Now that they're supported everywhere, they're one of the first tools I reach for whenever a component has to live in more than one layout.

Step 1: declare a container

.card-wrap {
  container-type: inline-size;
  container-name: card;
}

Step 2: query it

.card { display: block; }

@container card (min-width: 400px) {
  .card { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; }
}

Container queries vs media queries

• Media query — based on viewport
• Container query — based on a parent element's size
• Use container queries for reusable components that live in multiple layouts

Container query units

cqw, cqh, cqi, cqb let you size things relative to the container itself — perfect for fluid typography inside a card.

.card h2 { font-size: clamp(1rem, 5cqi, 1.75rem); }

Common gotchas

• A container queries its size — you can't size the container based on its children inside the same query
• container-type: inline-size only watches width; use 'size' for height too
• Don't over-name containers — naming is optional