How to Use CSS Container Queries in Your Web Design Projects

For more than a decade, responsive web design has relied almost exclusively on media queries. They work, but they have one big flaw: they only know about the viewport, not about the component you are actually styling. In 2026, CSS container queries are the modern answer, and they are fully supported across all major browsers. At Fat Cow Web Design, we have been using them in production for client projects, and in this tutorial we will show you exactly how to put them to work.

What Are CSS Container Queries?

A container query lets you style an element based on the size (or state) of its parent container, not the entire viewport. In other words, the same card component can look completely different depending on whether it sits inside a wide main column or a narrow sidebar, without writing a single line of JavaScript.

Container Queries vs Media Queries

Both tools have their place. Here is a quick comparison:

Feature	Media Queries	Container Queries
Based on	Viewport size	Parent container size
Best for	Page-level layout	Reusable components
Reusability	Limited	Excellent
Syntax	@media	@container
Browser support (2026)	Universal	All evergreen browsers

Rule of thumb: use media queries for the overall page skeleton, and container queries for everything inside it.

The Two-Step Setup

Using container queries always involves two steps:

1. Declare a container using the container-type property.
2. Query it with the @container at-rule.

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

The value inline-size means we are measuring the horizontal axis only, which is what you want 95% of the time. Naming containers is optional but recommended once you have several on the same page.

Real Use Case #1: A Responsive Card Component

This is the classic example. The same card should display as a vertical stack when narrow, and switch to a horizontal layout when there is enough room.

<div class="card-container">
  <article class="card">
    <img src="product.jpg" alt="Product">
    <div class="card-body">
      <h3>Product Title</h3>
      <p>Short description here.</p>
    </div>
  </article>
</div>

<style>
.card-container {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: 1rem;
}

@container (min-width: 450px) {
  .card {
    grid-template-columns: 150px 1fr;
    align-items: center;
  }
}
</style>

Drop this card anywhere on your site. Inside a wide section it goes horizontal, inside a narrow sidebar it stays vertical. No duplicate components, no JavaScript.

Real Use Case #2: A Smart Sidebar Widget

Sidebars often shrink or grow depending on the page template. With container queries, your widget adapts automatically:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

.widget-meta {
  font-size: 0.875rem;
  display: none;
}

@container sidebar (min-width: 300px) {
  .widget-meta {
    display: block;
  }
}

@container sidebar (min-width: 450px) {
  .widget {
    padding: 2rem;
  }
  .widget-title {
    font-size: 1.5rem;
  }
}

Real Use Case #3: Grid Items That Adapt Individually

When you have a CSS Grid of items that can each occupy different cell sizes, container queries shine:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.grid-item {
  container-type: inline-size;
}

.tile {
  padding: 1rem;
}

@container (min-width: 350px) {
  .tile { padding: 1.5rem; }
  .tile h3 { font-size: 1.25rem; }
}

@container (min-width: 500px) {
  .tile { padding: 2rem; }
  .tile .extra-info { display: block; }
}

Each tile reacts to its own width, even though they all share the same parent grid.

Container Query Units

Alongside @container, you also get new length units that are relative to the container:

• cqw: 1% of the container’s width
• cqh: 1% of the container’s height
• cqi: 1% of the container’s inline size
• cqb: 1% of the container’s block size
• cqmin and cqmax: the smaller or larger of the two

Perfect for fluid typography inside a component:

.card h3 {
  font-size: clamp(1rem, 5cqi, 1.75rem);
}

Style Queries: The Next Step

Beyond size, you can also query custom properties on a container. This unlocks variant systems without extra class names:

.theme-wrapper {
  container-name: theme;
  --mode: dark;
}

@container theme style(--mode: dark) {
  .button { background: #111; color: white; }
}

Best Practices We Use at Fat Cow Web Design

1. Name your containers as soon as you have more than one on a page.
2. Use inline-size as the default. Only reach for the full size when you really need height queries.
3. Do not turn the body into a container. It can cause layout issues with elements that rely on the viewport.
4. Combine container queries with media queries. Use media queries for global layout shifts and container queries for component logic.
5. Watch out for the parent collapse: an element with container-type: size can no longer get its height from its children.

Browser Support in 2026

Container queries are now safe to use in production. Chrome, Edge, Firefox, and Safari all support size queries, container query units, and style queries for custom properties. If you still need to support very old browsers, wrap your enhancements in a @supports block:

@supports (container-type: inline-size) {
  /* your container query code */
}

Conclusion

CSS container queries are the missing piece of true component-based responsive design. They let you build a card, sidebar widget, or grid tile once and trust it to look right everywhere you drop it. If you are starting a new project in 2026, there is no good reason not to use them. If you would like our team to audit your existing CSS architecture and modernize it, get in touch with Fat Cow Web Design.

FAQ

Are CSS container queries production-ready?

Yes. As of 2026, all major evergreen browsers support size and style container queries. They are safe to use without fallbacks for the vast majority of audiences.

Should I replace all my media queries with container queries?

No. Media queries are still the right tool for page-level layout decisions (such as switching from a one-column to a two-column page). Container queries are for individual components.

Can a container query measure both width and height?

Yes, if you set container-type: size. However this requires the container to have an explicit height, so most developers stick with inline-size.

Do container queries hurt performance?

In normal use, the performance impact is negligible. Browsers are highly optimized for them. Just avoid making every single element on the page a container.

What is the difference between container queries and Tailwind container queries?

Tailwind offers a plugin that exposes container query variants as utility classes. Under the hood it generates the same native CSS @container rules described in this article.