Container Queries
📌 Covered in this chapter:
Container Queries · container-type · Named Containers · @container · Component Responsiveness · CQ Units · vs Media Queries · Responsive Cards · Browser Support
Welcome to Chapter 29: Container Queries — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1Container Queries Ante Enti?
Container queries ante enti? Container queries viewport size badulu specific parent container dimensions based ga styles apply chestayi — reusable components ki extremely useful.
Media queries page-level; container queries component-level responsiveness.
2container-type & @container
.card-wrapper {
container-type: inline-size;
container-name: card;
}
@container (min-width: 500px) {
.card {
display: flex;
gap: 16px;
}
.card-image { flex: 0 0 200px; }
}Named containers: @container card (min-width: 400px) — specific container target cheyochu.
3Container Query Units & vs Media Queries
CSS — CQ Units
@container (min-width: 300px) {
.title {
font-size: clamp(1rem, 5cqi, 1.5rem);
padding: 2cqi;
}
}| Feature | Media Queries | Container Queries |
|---|---|---|
| Scope | Viewport / device | Parent container |
| Use case | Page layout | Reusable components |
| Units | vw, vh | cqi, cqw, cqh (container units) |
Browser support: Modern browsers (Chrome 105+, Safari 16+, Firefox 110+) — check caniuse.com for production.