container-type
The container-type property establishes an element as a query container for container queries.
Syntax
container-type: normal | inline-size | size;
Examples
.card-wrap {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card { grid-template-columns: 1fr 1fr; }
}
Output
The card switches to a two-column layout when its own container is at least 400px wide, independent of the viewport.
Notes
inline-size queries width only and is the common safe choice; size queries both dimensions and requires a definite block size. Use container-name with named @container rules. Container queries are baseline in 2026.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 105 |
| firefox | 110 |
| safari | 16 |
| edge | 105 |