@container
Lets you style elements based on the attributes of their parent container (like its width) rather than the entire browser viewport.
It is documented as part of the CSS Conditional Rules, CSS Container Queries specification.
Syntax
/* Usage 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.
105+
110+
16+
105+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more