Advanced CSS Container Queries Guide

CSS Container Queries represent a paradigm shift in responsive design, enabling components to adapt based on their container's size rather than just the viewport. This powerful feature allows for more modular and reusable components in modern web development.

Understanding Container Queries

Container queries allow you to style elements based on the size of their containing element, rather than the viewport size. This means you can create truly responsive components that work consistently regardless of their context.

Setting Up Container Queries

First, define a containment context:

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

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

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

Practical Use Cases

1. Product Cards

Create adaptive product cards that reorganize based on available space:

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

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

@container (min-width: 300px) {
  .product-card {
    grid-template-columns: auto 1fr;
  }

  .product-image {
    aspect-ratio: 1;
    width: 150px;
  }
}

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

2. Navigation Components

Build flexible navigation that adapts to its container:

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

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@container (min-width: 600px) {
  .nav-list {
    flex-direction: row;
    justify-content: space-between;
  }
}

Advanced Container Query Features

1. Container Query Length Units

Use container-relative units:

.element {
  padding: 5cqw; /* 5% of the container's width */
  font-size: 2cqh; /* 2% of the container's height */
  margin: 1cqi; /* 1% of the container's inline size */
}

2. Style Queries

Query container style properties:

@container style(--theme: dark) {
  .component {
    background: #333;
    color: white;
  }
}

3. Multiple Containers

Work with nested containers:

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

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

@container outer (min-width: 700px) {
  .outer-element {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@container inner (min-width: 300px) {
  .inner-element {
    flex-direction: row;
  }
}

Best Practices

1. Performance Optimization

Optimize container query performance:

/* Prefer logical properties */
.container {
  container-type: inline-size;
  /* Instead of container-type: size */
}

/* Group related queries */
@container (min-width: 400px) {
  .element-1 { /* styles */ }
  .element-2 { /* styles */ }
  .element-3 { /* styles */ }
}

2. Progressive Enhancement

Implement fallbacks for older browsers:

/* Base styles */
.card {
  display: grid;
  gap: 1rem;
}

/* Modern browsers */
@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
  }

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

Real-World Examples

1. Blog Post Layout

Create adaptive blog post layouts:

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

.blog-post {
  display: grid;
  gap: 2rem;
}

@container (min-width: 600px) {
  .blog-post {
    grid-template-columns: 2fr 1fr;
  }

  .sidebar {
    position: sticky;
    top: 2rem;
  }
}

@container (min-width: 800px) {
  .blog-post {
    grid-template-columns: 3fr 1fr;
  }
}

2. Dashboard Components

Build responsive dashboard widgets:

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

.widget {
  padding: 1rem;
}

@container (min-width: 300px) {
  .widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

@container (min-width: 500px) {
  .widget-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
}

Debugging Container Queries

1. Visual Debugging

Add visual indicators for container sizes:

.container {
  container-type: inline-size;
  position: relative;
}

.container::after {
  content: attr(class) ' - ' attr(style);
  position: absolute;
  bottom: 0;
  right: 0;
  background: #333;
  color: white;
  padding: 0.25rem;
  font-size: 12px;
}

2. Browser DevTools

Use browser developer tools to inspect container queries:

• Chrome DevTools: Elements panel > Computed tab
• Firefox DevTools: Layout panel > Container Queries section

Conclusion

CSS Container Queries provide a powerful way to create truly responsive and modular components. Key takeaways:

• Use container queries for component-level responsiveness
• Combine with media queries for comprehensive layouts
• Implement progressive enhancement
• Consider performance implications
• Debug effectively using browser tools

As browser support continues to improve, container queries will become an essential tool in modern web development. Start implementing them in your projects to create more flexible and maintainable components.