Container Queries

Container Queries

Media queries look at the WHOLE screen. Container queries look at the SIZED of a component's parent, a game changer for reusable widgets!

The idea

A card component should reflow based on ITS container, not the viewport.

.card {
  container-type: inline-size;   /* watch the parent's width */
}
@container (min-width: 300px) {
  .card { flex-direction: column; }
}

Declaring a container

container-type: inline-size = watch the width. Give it a name for readability:

.product {
  container: card / inline-size;
}
@container card (min-width: 40em) {
  .product__title {
    font-size: 2rem;
  }
}

Why it's cool

• The same widget works in sidebars, full-bleed, or grid tiles.
• No global screen-size hacks.
• Components become self-contained and portable.

Shorthand

.product-wrap {
  container: product / inline-size;
}

TL;DR

• Container queries size by the PARENT, not the screen.
• Declare container-type, then query with @container.
• Name containers for clarity and reusability.
• Perfect for cards, panels, and design systems.