CSS Container Queries in Practice

# CSS Container Queries in Practice

Container queries are revolutionizing responsive design.

## The Problem

Media queries respond to viewport size. But components need to respond to their container.

## The Solution

```css
.card-container {
container-type: inline-size;
}

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

## Use Cases

- **Card components** in different layouts
- **Sidebar widgets** with varying widths
- **Nested components** with unknown parents

## Browser Support

Now supported in all major browsers since 2023.

## Best Practices

1. Name your containers for clarity
2. Use `container-type: inline-size` for horizontal
3. Combine with media queries for page-level

## Conclusion

Container queries enable truly modular responsive components.