CSS Weekly #5: Container Queries Are Here!
CSS Weekly #5: Container Queries Are Here! 🎉
Hey ,
The wait is over! Container queries have landed in all major browsers. This changes EVERYTHING about responsive design.
What Are Container Queries?
Instead of responding to viewport size, elements respond to their container size:
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 150px 1fr;
}
}
Finally! Components that are truly self-contained! 🙌
Real-World Example
Here's a card component that adapts to any container:
.card-wrapper {
container-type: inline-size;
container-name: card;
}
.card {
padding: 1rem;
}
/* Small container: Stack vertically */
@container card (max-width: 300px) {
.card {
text-align: center;
}
.card img {
width: 60px;
height: 60px;
border-radius: 50%;
}
}
/* Medium container: Side by side */
@container card (min-width: 301px) {
.card {
display: flex;
gap: 1rem;
align-items: center;
}
.card img {
width: 80px;
height: 80px;
}
}
/* Large container: Rich layout */
@container card (min-width: 500px) {
.card {
display: grid;
grid-template-columns: 120px 1fr;
gap: 1.5rem;
}
.card img {
width: 100%;
height: auto;
}
}
🚀 Container Query Units
New units that are game-changers:
.responsive-text {
/* cqw = container query width */
font-size: clamp(1rem, 5cqw, 2rem);
/* cqi = container query inline size */
padding: 2cqi;
}
Units available:
- cqw - Container query width
- cqh - Container query height
- cqi - Container query inline size
- cqb - Container query block size
- cqmin - Smaller of cqi or cqb
- cqmax - Larger of cqi or cqb
Advanced: Style Queries
Still experimental, but coming soon:
@container style(--theme: dark) {
.card {
background: var(--dark-surface);
color: var(--dark-text);
}
}
🎯 Pattern: Responsive Typography
My favorite container query pattern:
.article {
container-type: inline-size;
}
.article h2 {
font-size: clamp(1.5rem, 4cqi + 1rem, 3rem);
line-height: 1.2;
}
.article p {
font-size: clamp(1rem, 2cqi + 0.5rem, 1.25rem);
line-height: 1.6;
}
/* Adjust spacing based on container */
@container (min-width: 600px) {
.article h2 {
margin-block: 2rem;
}
}
Migration Strategy
Start using container queries today:
/* Fallback for older browsers */
.card {
display: block;
}
/* Modern browsers */
@supports (container-type: inline-size) {
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
}
}
}
🔥 Hot Take: RIP Media Queries?
Not quite! Use both: - Media queries: Page-level layout - Container queries: Component-level layout
/* Media query for overall layout */
@media (min-width: 768px) {
.main {
display: grid;
grid-template-columns: 1fr 300px;
}
}
/* Container query for component */
@container (min-width: 400px) {
.card {
flex-direction: row;
}
}
This Week's Challenge
Convert one of your media-query-based components to use container queries. Notice how it now works in ANY container size!
Resources
Sponsored by Sizzy - The browser for responsive development. Test container queries across all sizes instantly!
Next week: Dark mode implementation strategies 🌙
— Sarah from CSS Weekly
P.S. Container queries are my favorite CSS feature in years. What's yours?
Add a comment: