Container queries are now stable across all modern browsers
Size container queries and container query units have officially landed in every stable browser. As of Chrome 105, Edge 105, Safari 16 and Firefox 110, the feature set is fully supported across the board.
Container queries work by letting you inspect the style information of a parent element — most commonly its inline-size. This is distinct from media queries, which only measure the viewport. With container queries, a component can adapt to its actual location in the layout, shifting its appearance depending on whether it sits within a sidebar, a grid cell, or any other available space.
Setting up a container
The first step is establishing containment on a parent element. You can do this using the container-type property, or the container shorthand, which lets you set a type and a name in one declaration:
.card-container {
container: card / inline-size;
}
Setting container-type to inline-size targets the parent's inline direction — in left-to-right languages, that equates to the width of the containing card.
Once a container is established, you can style its descendants with an @container rule:
.card-child {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card-child {
grid-template-columns: 1fr;
}
}
Container query units for responsive sizing
Container query length units behave in the same spirit as viewport units, but are relative to the container rather than the browser window. This opens the door to elegant, container-aware typography. For instance, you can pair these units with clamp() to define fluid but bounded text sizing:
.card-child h2 {
font-size: clamp(2rem, 15cqi, 4rem);
}
The 15cqi value in that example represents 15% of the container's inline size. The clamp() function caps the computed value between 2rem and 4rem; when 15cqi falls inside that range, the text scales fluidly with its container.
