Advanced CSS Container Queries

Container queries revolutionize responsive design by allowing components to adapt based on their container's size rather than the viewport. Let's explore advanced techniques and patterns for implementing container queries effectively.

Understanding Container Queries 📦

Container queries enable:

• Component-level responsiveness
• Reusable, context-aware components
• More predictable layouts
• Better component encapsulation
• Simplified responsive design

Basic Container Query Setup

Define and use container queries:

.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;
    }
}

@container card (max-width: 399px) {
    .card {
        grid-template-columns: 1fr;
    }
}

Advanced Container Patterns

Nested Containers

Implement nested container queries:

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

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

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

@container inner (min-width: 300px) {
    .inner-content {
        display: flex;
        gap: 1rem;
    }
}

Style Queries

Use style container queries:

.theme-container {
    container-type: style;
    container-name: theme;
}

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

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

Component Library Implementation

Create responsive components:

.card-grid {
    container-type: inline-size;
    display: grid;
    gap: 1rem;
}

.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@container (min-width: 700px) {
    .card-grid {
        grid-template-columns: repeat(
            auto-fit,
            minmax(300px, 1fr)
        );
    }
}

@container (max-width: 699px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

Layout Patterns

Sidebar Layout

Implement adaptive sidebar:

.layout {
    container-type: inline-size;
    display: grid;
    gap: 2rem;
}

@container (min-width: 1000px) {
    .layout {
        grid-template-columns: 250px 1fr;
    }

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

@container (min-width: 700px) and (max-width: 999px) {
    .layout {
        grid-template-columns: 200px 1fr;
    }
}

Gallery Layout

Create adaptive gallery:

.gallery {
    container-type: inline-size;
    display: grid;
    gap: 1rem;
}

.gallery-item {
    position: relative;
    aspect-ratio: 16/9;
}

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

@container (min-width: 500px) and (max-width: 799px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

Component States

Handle component states:

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

.interactive-component {
    transition: all 0.3s ease;
}

@container (min-width: 600px) {
    .interactive-component:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
}

@container (max-width: 599px) {
    .interactive-component:active {
        transform: scale(0.98);
    }
}

Performance Optimization

Container Query Units

Use container relative units:

.responsive-text {
    font-size: max(16px, 2cqi);
    padding: 1cqi;
    margin-bottom: 2cqi;
}

.responsive-image {
    width: min(100%, 40cqi);
    height: auto;
    margin: 2cqi auto;
}

Containment Optimization

Optimize containment:

.optimized-container {
    container-type: inline-size;
    contain: layout style paint;
}

@container (min-width: 500px) {
    .optimized-content {
        will-change: transform;
        transform: translateZ(0);
    }
}

Responsive Typography

Implement container-based typography:

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

.heading {
    font-size: clamp(1.5rem, 5cqi, 3rem);
    line-height: 1.2;
}

.body-text {
    font-size: clamp(1rem, 2cqi, 1.25rem);
    line-height: 1.5;
}

@container (min-width: 600px) {
    .heading {
        letter-spacing: -0.02em;
    }
}

Best Practices

1. Container Setup

• Use meaningful container names
• Set appropriate container types
• Consider nesting implications
• Optimize containment

1. Query Patterns

• Use logical breakpoints
• Consider component context
• Implement fallbacks
• Test different sizes

1. Performance

• Minimize containment impact
• Use appropriate units
• Optimize transitions
• Monitor reflow

1. Development

• Test across browsers
• Implement fallbacks
• Document breakpoints
• Use logical names

Fallback Strategies

Implement graceful degradation:

@supports not (container-type: inline-size) {
    .fallback-layout {
        display: block;
    }

    .fallback-content {
        max-width: 800px;
        margin: 0 auto;
    }
}

@supports (container-type: inline-size) {
    .modern-layout {
        container-type: inline-size;
    }
}

Conclusion

Container queries provide powerful tools for creating truly responsive components. Remember to:

• Start with component analysis
• Plan containment strategy
• Implement logical breakpoints
• Consider performance
• Test thoroughly
• Provide fallbacks

As container queries become more widely supported, these patterns will become essential for modern web development.