CSS

CSS Container Queries

Style components based on their container size, not the viewport.

By Rohan • Mar 02, 2026 • 5 min read

For over a decade, we've relied on Media Queries to build responsive sites. But they have a flaw: they only know about the viewport width.

The Component Problem

Imagine a card component. If you place it in a wide sidebar, it should look one way. If you place it in a narrow column, it should look another. Media queries fail here because the viewport might be huge (desktop) while the column is tiny.

Enter Container Queries

With container-type: inline-size;, an element becomes a queryable container. Children can then style themselves based on the available space inside that container.

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

@container (min-width: 400px) {
  .card {
    display: flex; /* Switch to horizontal layout */
  }
}

Is it ready?

Yes. All modern browsers support it. It's time to stop thinking about "screens" and start thinking about "components."

← Back to Blog