Container Queries

Style elements based on the size of their parent container, not the whole browser viewport, unlocking true component reusability.

CSS6 min readConcept 26 of 43

What they are

Container Queries (@container) are conditional CSS rules, just like Media Queries. But instead of checking the width of the entire browser window, they check the width of a specific parent element (the container).

This is one of the most powerful modern CSS features, allowing components to govern their own layout independently of where they are placed on the page.

Why it matters

Imagine you build a beautiful 'Product Card' component. You want it to display horizontally (image left, text right) when there's plenty of space, and vertically (stacked) when space is tight.

If you use Media Queries, the card only knows about the browser window. If a user is on a massive desktop screen, but you place the card inside a narrow 300px sidebar, the media query sees the giant screen and applies the horizontal layout, breaking the card out of the sidebar!

Container queries solve this by letting the card ask: 'How much space do I actually have right here in this sidebar?'

How it works

1. **Define the Container**: First, you must tell the browser which parent element is the container. You do this by applying container-type: inline-size; to the parent wrapper.

2. **Query the Container**: Then, on the child elements, you write a query using @container (min-width: 400px) { ... }.

Now, regardless of the browser size, the styles will only apply if that specific parent wrapper is at least 400px wide.

Try it

Resize the parent container by dragging the handle. Watch how the card inside automatically adapts its layout from a vertical stack to a horizontal layout based on the space it has, completely ignoring the browser window size.

Container Resize

Container Width

Drag to resize the dashed container element.

200px
160px300px

Container is < 260px. Card stacks vertically.

/* 1. Define the container */
.sidebar-container {
container-type: inline-size;
}
/* 2. Default (Narrow) Card */
.product-card {
display: flex;
flex-direction: column;
}
/* 3. Query the Container */
@container (min-width: 260px) {
.product-card {
flex-direction: row;
}
}

Browser Window (Static)

Container
200px
Other Content
iUnlike Media Queries, the container completely ignores the overall screen size. The card only cares about how much room it has inside the dashed box!

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is the primary difference between a media query and a container query?
  2. 2What CSS property must you apply to a parent element before you can use container queries on its children?
  3. 3In Tailwind CSS, how do you apply a flex-row layout only when the container is wider than the 'md' breakpoint?

Remember this

  • Container queries allow components to respond to their parent's width instead of the browser viewport.
  • This makes components truly modular and reusable in any context (like a narrow sidebar).
  • You must define a container context using container-type: inline-size.
  • Tailwind uses the @container class on parents, and @sm:, @md: modifiers on children.

Done with this concept?

Mark it complete to track your progress. No login needed.