Container queries let components respond to their parent container size instead of the viewport. Define a containment context: .card-container { container-type: inline-size; }. Then query it: @container (min-width: 400px) { .card { flex-direction: row; } }. This makes truly reusable components — a card that stacks vertically in a narrow sidebar but goes horizontal in a wide content area, regardless of screen size. Supported in all modern browsers since 2023.
guide2 min read
Container Queries
Style components based on their container size, not the viewport.
Try these tools
More guide articles
Optimize Images for Web
Complete guide to image optimization: format selection, compression, sizing, lazy loading, and CDN delivery.
Build a CSS Design System
Step-by-step guide to creating a CSS design system with custom properties, typography, colors, and spacing scales.
Regex for Beginners
Learn regular expressions from scratch. Covers basic syntax, common patterns, and practical examples.
Choosing a Tech Stack
A practical guide to choosing frontend, backend, database, and hosting for your project.