📚 Today I Learned
CSS Container Queries Are Game Changers
December 27, 2024
#css#responsive-design#web-development
Today I discovered the power of CSS container queries, which solve a major limitation of traditional media queries.
The Problem with Media Queries
Media queries only respond to viewport size, not the actual container size. This makes it difficult to create truly reusable components.
/* Traditional media query - viewport based */
@media (max-width: 768px) {
.card {
flex-direction: column;
}
}
Container Queries Solution
/* Container query - container based */
.sidebar {
container-type: inline-size;
}
@container (max-width: 400px) {
.card {
flex-direction: column;
}
}
Key Advantages
- Component-aware: Responds to actual container size
- Reusable: Same component works in different layouts
- Predictable: Behavior doesn’t depend on viewport
- Flexible: Perfect for cards, widgets, and modular components
Browser Support
Container queries are well-supported in modern browsers:
- Chrome 105+
- Firefox 110+
- Safari 16+
Real-World Example
A card component that adapts based on its container width, not the viewport:
.card-container {
container-type: inline-size;
}
@container (min-width: 300px) {
.card {
display: flex;
align-items: center;
}
.card-image {
width: 100px;
margin-right: 1rem;
}
}
This enables truly modular, responsive components that work anywhere!