@container
Lets you style elements based on the attributes of their parent container (like its width) rather than the entire browser viewport.
Quick example
/* 1. Define the container */
.card-layout {
container-type: inline-size;
}
/* 2. Use the container query */
@container (min-width: 700px) {
.card {
display: grid;
grid-template-columns: 2fr 1fr;
}
}@container Browser Support
Widely available Since 2023 93% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
105+
110+
16+
105+