The End of Media Queries? Introduction to Container Queries

“Build a component once, drop it anywhere.”

For over a decade, Responsive Web Design has been synonymous with Media Queries. We write CSS based on the width of the entire screen.

@media (min-width: 768px) {
  .card {
    display: flex;
  }
}

This works great for page layouts. But for component libraries, it’s a nightmare.

The Problem: Context Awareness

Imagine a “Product Card” component.

• On the homepage, it occupies the full width. Simple.
• In a sidebar, it’s squeezed into a narrow column.
• Inside a dashboard widget, it’s medium-sized.

If you rely on @media queries, the card only knows how wide the screen is. It has no idea it’s squished inside a tiny sidebar on a massive 4k monitor.

The Solution: Container Queries

Container Queries allow us to style an element based on the available space within its container, not the viewport.

Step 1: Define the Container

First, you tell the parent element that it is a container.

.card-wrapper {
  /* Define this element as a query container */
  container-type: inline-size;
  container-name: card-container;
}

• container-type: inline-size: We want to query the width (most common).
• container-name: card-container: Optional, but good practice. It allows us to target this specific container explicitly.

Step 2: Query the Container

Now, inside your component, you query that container.

.card {
  display: flex;
  flex-direction: column;
}

/* When the container is wider than 400px */
@container card-container (min-width: 400px) {
  .card {
    flex-direction: row; /* Switch to horizontal layout */
    align-items: center;
  }

  .card-image {
    width: 50%;
  }
}

New Units: The “Fluid” Typography Dream

Container Queries brought new CSS units that are relative to the container’s size, similar to how vw is relative to the viewport.

• cqw: 1% of a query container’s width
• cqi: 1% of a query container’s inline size (logical width)
• cqh: 1% of a query container’s height
• cqmin / cqmax: Smaller/Larger of cqi and cqb

This is perfect for fluid typography that scales with the component, not the screen.

.card-title {
  /* Title is always 5% of the card's width */
  font-size: 5cqi;
}

Advanced: Style Queries (Experimental)

We can also query the computed style of a container, not just its size.

@container style(--theme: dark) {
  .card {
    background: black;
    color: white;
  }
}

Note: Style queries have varying browser support compared to Size queries.

Implementation Strategy

This feature shifts the responsibility of layout from the page to the component.

1. True Portability: You can drag-and-drop that .card into a 3-column grid, a sidebar, or a modal. It will “look at itself”, realize how much space it has, and adapt automatically.
2. Decoupling: The page layout developer doesn’t need to know the inner breakpoints of the card.

Browser Support

As of 2026, Container Queries (@container) and units (cqi/cqw) are supported in all major evergreen browsers (Chrome, Firefox, Safari, Edge).

Conclusion

Media queries aren’t dead—they are still perfect for global page layouts. But for individual UI elements, Container Queries are the new standard. Stop guessing screen sizes and start reacting to available space.