What's is Container Queries in CSS

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.

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 

Brower Supports 

browser support container queries

Previous Post Next Post