Responsive design moving from media queries to container queries is an important turning point in CSS development history. In 2026, browser support for container queries exceeds 95%, and applications in real projects are becoming increasingly mature. Understanding the core value and application patterns of container queries is an essential skill for modern frontend developers.

From Media Queries to Container Queries

The problem with traditional media queries is that they can only perceive viewport size, not the component's available space:

/* Media query: based on viewport */
@media (min-width: 768px) {
  .card { display: grid; grid-template-columns: 200px 1fr; }
}

/* Problem: when sidebar collapses, main content area narrows, but viewport doesn't change */
/* Result: card still uses two-column layout, content gets squeezed */

Container queries solve this problem—letting components adjust layout based on their own container size:

/* Container query: based on parent container */
.card-container {
  container-type: inline-size;
}

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

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

Basic Syntax Detailed

Container Types

container-type has three values:

/* inline-size: only monitors horizontal size (most common) */
.sidebar { container-type: inline-size; }

/* size: monitors both horizontal and vertical size */
.chart-container { container-type: size; }

/* normal: normal element, not a container */
.normal-element { container-type: normal; }

In most cases, inline-size is sufficient since responsive design mainly focuses on horizontal changes.

Container Query Syntax

Container query syntax is similar to media queries but supports more features:

/* Basic size query */
@container (min-width: 500px) { ... }
@container (max-width: 499px) { ... }

/* Range query */
@container (400px <= width <= 800px) { ... }

/* Query container name */
.sidebar { container-type: inline-size; container-name: sidebar; }
@container sidebar (min-width: 300px) { ... }

/* Style query (7.2 new feature) */
@container style(--theme: dark) { ... }

Named Containers

When there are multiple containers on a page, named containers can avoid query conflicts:

/* Define named containers */
.page-header { container-type: inline-size; container-name: header; }
.main-content { container-type: inline-size; container-name: content; }

/* Query specific containers */
@container header (min-width: 600px) {
  .nav-items { display: flex; gap: 1rem; }
}

@container content (min-width: 800px) {
  .article-body { columns: 2; }
}

Practical Application Patterns

Card Component Responsive

A typical card component needs to adjust layout based on container width:

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

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

/* Small container: vertical layout */
@container (max-width: 399px) {
  .card {
    grid-template-columns: 1fr;
  }
  .card-image { aspect-ratio: 16/9; }
}

/* Medium container: horizontal layout, image on left */
@container (400px <= width <= 699px) {
  .card {
    grid-template-columns: 150px 1fr;
  }
}

/* Large container: horizontal layout, larger image */
@container (min-width: 700px) {
  .card {
    grid-template-columns: 250px 1fr;
  }
  .card-title { font-size: 1.5rem; }
}

Navbar Responsive

Navigation bars are the most classic application scenario for container queries:

.navbar {
  container-type: inline-size;
  container-name: nav;
}

.nav-items {
  display: flex;
  gap: 0.5rem;
  list-style: none;
}

/* Wide container: full navigation */
@container nav (min-width: 768px) {
  .nav-items {
    justify-content: center;
  }
  .nav-toggle { display: none; }
}

/* Narrow container: hamburger menu */
@container nav (max-width: 767px) {
  .nav-items {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    flex-direction: column;
    background: var(--bg-primary);
    transition: left 0.3s ease;
  }
  .nav-items.open { left: 0; }
  .nav-toggle { display: block; }
}

Container Queries with CSS Variables

Container queries can be combined with CSS variables for more flexible responsive design:

.card-wrapper {
  container-type: inline-size;
  
  /* Set CSS variables based on container size */
  --card-padding: 1rem;
  --card-font-size: 0.875rem;
}

@container (min-width: 500px) {
  .card-wrapper {
    --card-padding: 1.5rem;
    --card-font-size: 1rem;
  }
}

@container (min-width: 800px) {
  .card-wrapper {
    --card-padding: 2rem;
    --card-font-size: 1.125rem;
  }
}

.card {
  padding: var(--card-padding);
  font-size: var(--card-font-size);
}

Performance Optimization

Container query performance is usually not an issue, but still needs attention in complex layouts:

1. Avoid excessive nesting: Don't define container queries in already small containers
2. Choose container type reasonably: In most cases inline-size is sufficient
3. Use contain property: Adding contain: layout style on container elements can optimize rendering performance

/* Optimized container definition */
.card-wrapper {
  container-type: inline-size;
  contain: layout style;
}

Summary

Container queries are the future direction of CSS responsive design. They give components true "self-awareness" capability, allowing them to adjust layout based on their own available space rather than viewport size. In real projects, container queries are particularly suitable for handling sidebar layouts, card components, navigation bars, and data tables. The key to mastering container queries is understanding "component-driven" responsive thinking—no longer considering "how wide is the viewport" but "how much space does this component have."