Media Queries Are No Longer the Only Choice
Media Queries have dominated the Responsive era for over a decade. However, this tool has a major limitation: it only cares about the screen size (viewport). This makes it difficult when you want to reuse a component in different locations.
Think about a product “Card.” On Desktop, it sits in a 3-column Grid and looks great. But when you drag that exact same Card into a narrow Sidebar, Media Queries become useless. Even though the screen is still 1920px, the actual space for the Card is now only about 300px. The result? The component layout breaks or overflows the frame.
In a recent Dashboard project, my team had to maintain dozens of classes like .card--sidebar or .card--small. Since switching to Container Queries, we have eliminated about 40% of redundant CSS logic. The component now decides for itself: “If my container is wider than 400px, I’ll go horizontal. If it’s smaller, I’ll automatically switch to a vertical layout.”
In other words, components now have spatial awareness instead of passively depending on the browser viewport.
Implementing Container Queries in 2 Steps
Currently, Container Queries are supported by 91% of browsers globally (according to CanIUse). You can use them directly with pure CSS without installing additional libraries. The setup process is extremely simple.
First, define the parent element as a “container”:
.parent-container {
/* Turn this element into a 'measuring stick' for its children */
container-type: inline-size;
/* Name it to avoid confusion if there are multiple nested containers */
container-name: product-grid;
}The inline-size value is the most common choice. It allows child elements to check the width of the parent. If you use size, you can check both width and height, but you are then forced to set a fixed height for the parent.
Building a “Know-It-All” Component
Let’s practice with a smart Card. The goal is to help it transform itself regardless of where it is placed in the layout.
1. Basic HTML Structure
<div class="card-wrapper">
<div class="custom-card">
<img src="thumb.jpg" alt="Product">
<div class="content">
<h2>Product Name</h2>
<p>Detailed product description...</p>
</div>
</div>
</div>2. Turning the Wrapper into a Container
.card-wrapper {
container-type: inline-size;
width: 100%;
}3. Writing Queries for the Component
Instead of @media, we use @container. This approach keeps the display logic directly attached to the component.
/* Default style: Vertical layout for narrow spaces */
.custom-card {
display: flex;
flex-direction: column;
gap: 16px;
}
/* When the container is 500px or wider */
@container (min-width: 500px) {
.custom-card {
flex-direction: row;
align-items: center;
}
.custom-card img {
width: 200px;
}
}The real power lies here: If you drop this Card into a Bootstrap col-md-3, it appears vertically. Drop it into col-md-12, and it automatically switches to horizontal. You no longer need to worry whether the user’s screen is 1024px or 2K.
Using New Measurement Units (cqw, cqh)
Container Queries also introduce a set of highly flexible units. You can adjust the font-size proportionally to the width of the component itself:
cqw: 1% of the container’s width.cqh: 1% of the container’s height.
For example, to keep the title balanced with the card size:
.custom-card h2 {
font-size: clamp(1rem, 8cqw, 2rem);
}Debugging and Fallback Experience
Working with Container Queries can sometimes be confusing because resizing the browser doesn’t always trigger CSS changes immediately. Take advantage of Chrome DevTools.
When inspecting, you will see a “container” badge next to the element. Click it, and the browser will highlight the container being queried. If the CSS isn’t applying, check immediately if you have declared container-type for the nearest parent element.
For projects that need to support older browsers (like IE or older versions of Safari), use @supports:
@supports not (container-type: inline-size) {
/* Write CSS fallback using Flexbox or Media Queries here */
.custom-card { flex-direction: column; }
}Don’t try to turn everything into Container Queries. Reserve them for highly reusable UI components. For the overall page layout like Headers or Footers, Media Queries remain the most optimal and simplest choice.
