CSS Container Queries: The Layout Revolution You Should Be Using

Container queries let components respond to their own size, not the viewport. Learn the syntax, browser support, real use cases and how they change component-based design.

Container queries ask: how big is this element's parent? That shift in perspective is deceptively powerful — it lets UI components be truly self-contained and reusable.

Media queries react to viewport size. But a sidebar card at 300px wide needs different styling than the same card in a main column at 600px wide — even on the same viewport. Media queries can't express that. Container queries can.

/* 1. Declare the containment context */
.card-wrapper {
  container-type: inline-size;
  /* Optional: give it a name */
  container-name: card;
}

/* 2. Query the container */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
  }
}

@container (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr;
    font-size: 1.1rem;
  }
}

Named containers let you query a specific ancestor, even if there are multiple containers in the hierarchy:

.sidebar   { container: sidebar / inline-size; }
.main-area { container: main   / inline-size; }

/* Only responds to the sidebar container */
@container sidebar (max-width: 280px) {
  .widget { padding: 8px; }
}

/* Only responds to the main-area container */
@container main (min-width: 700px) {
  .widget { padding: 24px; }
}

Container queries introduce their own relative units:

• cqw — 1% of the container's width
• cqh — 1% of the container's height
• cqi — 1% of the container's inline size

/* Font scales with the card width, not the viewport */
.card-title {
  font-size: clamp(1rem, 5cqi, 2rem);
}

Container queries have baseline support across all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). As of early 2025, global support sits above 93%. It's safe to use in production with a graceful fallback for older browsers.

@supports (container-type: inline-size) {
  .card-wrapper { container-type: inline-size; }
}