CSS Container Queries: The Future is Here

Beyond Media Queries

For years, media queries have been our only tool for responsive design. But they have a fundamental flaw: they respond to the viewport size, not the container size. This makes reusable components surprisingly hard to build.

Enter Container Queries

Container queries let a component adapt based on the size of its parent container:

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

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

Real-World Use Cases

Sidebar vs. Main Content

The same component can render differently based on where it's placed:

/* In a narrow sidebar */
@container (max-width: 300px) {
  .user-card {
    flex-direction: column;
    text-align: center;
  }
}

/* In wide main content */
@container (min-width: 500px) {
  .user-card {
    flex-direction: row;
    gap: 1rem;
  }
}

Dashboard Widgets

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

.widget {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .widget-chart {
    aspect-ratio: 16/9;
  }
}

@container (max-width: 399px) {
  .widget-chart {
    aspect-ratio: 1;
  }
}

Browser Support

Container queries are now supported in all modern browsers. As of 2026, you can use them in production with confidence.

Key Takeaways

• Container queries make components truly self-contained
• They complement (not replace) media queries
• Use container-type: inline-size on parent elements
• Perfect for component libraries and design systems

The future of responsive design is container-aware, and it's available today.