Global Access to Container Queries

Containers are queryable globally. Here's how.

Container Queries are Great

It's amazing that @container queries are here and widely available.

Different from @media queries, which interrogate the viewport width, @container queries interrogate DOM element widths.

Containers Globally Available

When you define a container, you can give it a name:

.layout-container {
  container-name: cols;
  container-type: inline-size;
}

Then when you write the query, you can reference it by name:

@container cols (min-width: 24rem) {
  .layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
  }
}

Omitting the name will look for the closest parent container and use it in the query.

A container is accessible by name globally, even outside of a CSS module.

It's good to remember that the same is true for an unnamed container. You can query it if it's going to be the closest parent container.

Container as a Concept

The container query example above made the .layout element a two-column grid when there's enough space. Enough space was defined as min-width: 24rem. In other words, "When that box is at least 24rem wide, make it 2 columns."

It's just a box with a query. But if we think about it as a more semantic concept, we'll be able to style against it more readily.

For instance, what if @container cols (min-width: 24rem) meant "When we have a two column layout on the page" in our mind?

Coupling Components

Now we can make other components act differently when we're in two column mode. For instance, we could make components taller when they have their own column:

.component {
  max-height: 12rem;
}
@container cols (min-width: 24rem) {
  .component {
    max-height: 26rem;
  }
}

This is a direct coupling, however. This component now is tied to the container name, its placement in the DOM and its query. If any of these ever changes at the layout level, the component will have to change too.

Feels powerful. But I don't like the coupling. Is there a more elegant way to do this? Probably. I still have much to learn about @container queries.