Container Queries

Media queries let you respond to the viewport size, but what if a component needs to adapt based on the size of its container? A card component might appear in a wide main area or a narrow sidebar, and it should look good in both places regardless of viewport width.

This is exactly what Container Queries solve. They let you apply styles based on the dimensions of a parent container rather than the viewport.

/* 1. Define a containment context */
.card-wrapper {
  container-type: inline-size;
}

/* 2. Query the container's size */
@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

The element with container-type becomes the container that descendant @container rules query against. This is a fundamental shift in responsive design: components can now be self-responsive rather than relying on the page layout to dictate their appearance.

The container-type property defines what kind of containment is established:

• inline-size — Enables queries on the container's inline (width) dimension. This is the most common value.
• size — Enables queries on both width and height. Use this when you also need to query the container's block (height) dimension.
• normal — The default. The element is not a query container.

You can also name containers with container-name and target them specifically in your queries:

.sidebar  { container-type: inline-size; container-name: sidebar; }
.main     { container-type: inline-size; container-name: main; }

@container sidebar (max-width: 200px) {
  .widget { font-size: 12px; }
}

Container Queries also introduce container query units:

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

@container (min-width: 300px) {
  .card-title { font-size: 5cqi; } /* scales with container */
}