CSS Container Queries: Finally Here

Goodbye Media Queries for Components

Container queries let components style themselves based on their parent container size, not the viewport.

Basic Syntax

.card-container { container-type: inline-size; } @container (min-width: 400px) { .card { display: flex; } }

Container queries enable truly responsive components that work anywhere they're placed.