Syntax
container-type: inline-size;
@container (min-width: 400px) { }Examples
Making a Container Queryable
Establishing an element as a query container for its descendants.
.card-wrapper {
container-type: inline-size;
container-name: card; /* optional, lets you target a specific container */
}Responding to Container Size
Styling a card differently depending on how much space its container actually has.
.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 */
}
}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
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.CSS Grid
CSS Grid is a powerful two-dimensional layout system that provides precise control over both rows and columns simultaneously. Unlike Flexbox which is one-dimensional, Grid excels at creating complex layouts with explicit row and column structures. It's ideal for page layouts, image galleries, and any design requiring both horizontal and vertical alignment.Flex Item Properties
While display: flex controls the container, individual flex items have their own properties for fine-grained control. flex-grow, flex-shrink, and flex-basis (usually combined via the flex shorthand) control how an item grows or shrinks to fill space. order changes visual order without touching the HTML. align-self overrides the container's align-items for a single item.grid-template-areas
grid-template-areas lets you visually lay out a grid using named regions written directly in your CSS, making complex page layouts remarkably readable. Each string represents a row, each word represents a named area, and child elements are placed into an area using grid-area, matching the visual shape of your layout with the code itself.
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.CSS Grid
CSS Grid is a powerful two-dimensional layout system that provides precise control over both rows and columns simultaneously. Unlike Flexbox which is one-dimensional, Grid excels at creating complex layouts with explicit row and column structures. It's ideal for page layouts, image galleries, and any design requiring both horizontal and vertical alignment.Flex Item Properties
While display: flex controls the container, individual flex items have their own properties for fine-grained control. flex-grow, flex-shrink, and flex-basis (usually combined via the flex shorthand) control how an item grows or shrinks to fill space. order changes visual order without touching the HTML. align-self overrides the container's align-items for a single item.grid-template-areas
grid-template-areas lets you visually lay out a grid using named regions written directly in your CSS, making complex page layouts remarkably readable. Each string represents a row, each word represents a named area, and child elements are placed into an area using grid-area, matching the visual shape of your layout with the code itself.