CSS Container Queries: Responsive Design 2.0

The Flaw of Media Queries

For a decade, we built responsive design using @media (max-width: 768px). This queries the width of the entire viewport. But in a component-driven world (React/Vue), a "Card" component might be placed in a wide main section, or squeezed into a narrow sidebar. If the Card only responds to the screen size, it will look broken in the sidebar.

Enter Container Queries

Container Queries allow an element to change its styling based on the width of its parent container, not the screen. You define a parent element as a container: container-type: inline-size;.

True Reusability

Now, inside your Card component CSS, you write @container (max-width: 400px) { .card-title { font-size: 1rem; } }. You can drop this Card component anywhere in your app. If it is placed in a narrow 300px sidebar, it will stack elegantly. If placed in a 900px main grid, it will expand perfectly. It is the holy grail of reusable UI design.