What's is Container Queries in CSS
A Container is an element that contains another element(s). CSS Container Queries specify changes to an element in relation to its parent container or element rather than the entire viewport.
CSS Container Queries enable developers to approach responsiveness from a component standpoint, where elements on a page are designed to be responsive as individual units.
Problem
Websites have components that need to change their layout based on the container’s available width. This not always related to the viewport’s size but to where the component is placed in the layout.
They provide a more flexible and responsive design approach, allowing elements to respond to their parent container's dimensions.
Think of it as elements that can ask their containing elements, "How much space do I have?" and adapt accordingly.
This enables better control over layouts for various screen sizes and dynamic content. 📱💻🖥️
Websites have components that need to change their layout based on the container’s available width. This not always related to the viewport’s size but to where the component is placed in the layout.
Container type property:
- Size: Supports dimensional queries on both the inline and block axis.
- Inline-size: Supports dimensional queries on the inline axis.
- Block-size: Supports dimensional queries on the block axis.
- Style: Style queries by defining a query container.
- State: State queries by defining a query container.
Container syntax same as media queries syntax.
@container (min-width: 500px) {
.card {
//do whatever you want }
}
.card {
//do whatever you want
}
Brower Supports
