Syntax
container-type: inline-size;
@container (min-width: 400px) { }Examples
Making a Container Queryable
Establishing an element as a query container for its descendants.
/* Demo setup: sizing, structure or neutral surfaces. */
.preview-resize{resize:horizontal;overflow:auto;max-width:100%;width:32rem;border:2px solid #0f766e;padding:1rem;box-sizing:border-box}.card-wrapper{container-type:inline-size;container-name:card}.card{gap:1rem}.preview-photo{width:100px;height:80px;object-fit:cover}
.card-wrapper {
container-type: inline-size;
container-name: card; /* optional, lets you target a specific container */
}- The named wrapper establishes the container query context.
- The card has image and text children, so a direction change is clearly visible.
- Drag the wrapper wider or narrower across 400px; resizing the outer documentation window is not required.
HTML used by this example
<p>Drag the lower-right corner, or edit the wrapper width in the CSS:</p><div class="card-wrapper preview-resize"><article class="card"><img class="preview-photo" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22240%22%20viewBox%3D%220%200%20480%20240%22%3E%3Crect%20width%3D%22480%22%20height%3D%22240%22%20fill%3D%22%23e0f2fe%22%2F%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%2255%22%20r%3D%2230%22%20fill%3D%22%23fbbf24%22%2F%3E%3Cpath%20d%3D%22M0%20240%20135%2055%20280%20240%22%20fill%3D%22%230f766e%22%2F%3E%3Cpath%20d%3D%22m150%20240%20155-150%20175%20150%22%20fill%3D%22%235b21b6%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22218%22%20fill%3D%22white%22%20font-size%3D%2224%22%20font-family%3D%22sans-serif%22%3EOriginal%20landscape%3C%2Ftext%3E%3C%2Fsvg%3E" alt="A sun above green and purple mountains"><div><h3>Weekend workshop</h3><p>Layout depends on this region, not the whole page width.</p></div></article></div>Responding to Container Size
Styling a card differently depending on how much space its container actually has.
/* Demo setup: sizing, structure or neutral surfaces. */
.preview-resize{resize:horizontal;overflow:auto;max-width:100%;width:32rem;border:2px solid #0f766e;padding:1rem;box-sizing:border-box}.card-wrapper{container-type:inline-size;container-name:card}.card{gap:1rem}.preview-photo{width:100px;height:80px;object-fit:cover}
.card {
display: flex;
flex-direction: column;
}
@container card (min-width: 400px) {
.card {
flex-direction: row; /* switches to a horizontal layout once the CONTAINER is wide enough */
}
}- The named wrapper establishes the container query context.
- The card has image and text children, so a direction change is clearly visible.
- Drag the wrapper wider or narrower across 400px; resizing the outer documentation window is not required.
HTML used by this example
<p>Drag the lower-right corner, or edit the wrapper width in the CSS:</p><div class="card-wrapper preview-resize"><article class="card"><img class="preview-photo" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22240%22%20viewBox%3D%220%200%20480%20240%22%3E%3Crect%20width%3D%22480%22%20height%3D%22240%22%20fill%3D%22%23e0f2fe%22%2F%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%2255%22%20r%3D%2230%22%20fill%3D%22%23fbbf24%22%2F%3E%3Cpath%20d%3D%22M0%20240%20135%2055%20280%20240%22%20fill%3D%22%230f766e%22%2F%3E%3Cpath%20d%3D%22m150%20240%20155-150%20175%20150%22%20fill%3D%22%235b21b6%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22218%22%20fill%3D%22white%22%20font-size%3D%2224%22%20font-family%3D%22sans-serif%22%3EOriginal%20landscape%3C%2Ftext%3E%3C%2Fsvg%3E" alt="A sun above green and purple mountains"><div><h3>Weekend workshop</h3><p>Layout depends on this region, not the whole page width.</p></div></article></div>Parameters and values
- container-type (inline-size | size | normal): Establishes an element as a query container
- container-name (string): Optional name to target a specific container with @container
- @container (at-rule): Applies styles conditionally based on the named container's size
Best practices
- Use container queries for reusable components that need to adapt based on where they are placed, not just overall screen size
- Set container-type on the direct parent of the element you actually want to style - an element cannot query its own container-type
- Use container-name to disambiguate when nested containers exist and you need @container to target a specific one
- Container queries and media queries are complementary, not competitors - use media queries for page-level layout and container queries for component-level layout
Browser compatibility
- chrome
- Yes
- firefox
- Yes
- safari
- Yes
- edge
- Yes
These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.
CSS specifications (modules)