📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › CSS Mastery › Container Queries

Container Queries

6 min read
Container queries style components based on their container width with @container (min-width: 400px) { }. Set container-type: inline-size on the parent. This enables truly reusable components that respond to their context.

Container Queries

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

/* Respond to parent, not viewport */
@container sidebar (min-width: 300px) {
    .sidebar .card {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
}

Container queries let components respond to their own container's size, not just the viewport.