Container queries in CSS allow components to respond to their parent container’s size, not the viewport. To use them, define a container with container-type, then apply styles using @container based on the container’s width (or height). You can optionally name containers with container-name for specificity. They enable modular, context-aware UI components without JavaScript, though browser support is still evolving, and container-type: size remains experimental.

If you've been working with responsive design, you probably know how useful media queries are. But what if you could make components respond to their container instead of the whole viewport? That's exactly what container queries in modern CSS let you do — and they're a game-changer for building modular, reusable UI components.

What Are Container Queries?

Container queries allow you to apply styles based on the size of a parent container rather than the entire browser window. This is super helpful when you have components that need to look different depending on where they’re placed — like a card layout that might show up in a sidebar or across a full-width banner.

Before container queries, developers often relied on JavaScript or hacky workarounds to get this kind of behavior. Now, it’s native and clean.

To use a container query, first, you need to define a container using the container-type property:

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

Then, you can write a query like this:

@container (min-width: 400px) {
  .my-component {
    /* Styles here */
  }
}

This way, .my-component will only get those styles when its container is at least 400px wide — no matter where that container appears on the page.

How to Set Up a Proper Container

Not every element can be a container by default. You need to explicitly tell the browser which elements should act as containers. Here's how:

• Use container-type to define what kind of containment you want:
  • inline-size: Reacts to width changes.
  • size: Reacts to both width and height (still experimental).
  • normal: No special containment.

You can also name your containers using container-name, which helps target specific ones if you have multiple nested containers:

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

Then, in your query:

@container card-container (min-width: 500px) {
  /* Styles here */
}

Naming is optional but useful when dealing with deeply nested components.

Practical Uses for Container Queries

One of the most common real-world uses is adjusting component layouts based on available space inside a parent. For example:

Imagine a product card that shows an image, title, and price. In a wide layout, you might want all three side by side. But in a narrow sidebar, stacking them vertically makes more sense.

Instead of writing complex, context-specific classes, you just set up a container around the card and write one rule:

@container (min-width: 300px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
  }
}

Now the same component adapts wherever it goes — no extra JS, no bloated frameworks.

Another great use case is typography scaling. Want text to grow slightly within a container as space allows? Yep, you can do that too.

Watch Out for Browser Support

Right now, container queries are pretty well supported in modern browsers like Chrome, Edge, and Safari. Firefox supports them behind a flag (layout.css.containerQueries.enabled), so it's not quite universal yet.

If you're targeting older environments or need full compatibility today, you might still reach for media queries or utility-based systems like Tailwind. But if you're building for modern browsers or don't mind progressive enhancement, container queries are safe to start experimenting with.

Also, keep in mind that container-type: size (which lets you query both width and height) is still experimental, so stick with inline-size unless you're okay with some instability.

And that’s basically it. Container queries aren’t complicated once you get the hang of them, but they open up a whole new level of flexibility in component-driven design.

The above is the detailed content of A modern CSS tutorial on container queries. For more information, please follow other related articles on the PHP Chinese website!