CSS Container Queries
Resize the container to see child components adapt. Click code to copy.
600px
Responsive Card
This card adapts based on container width, not viewport width.
.container {
container-type: inline-size;
}
@container (max-width: 350px) {
.card { grid-template-columns: 1fr; }
}
@container (max-width: 200px) {
.card p { display: none; }
}