Container Queries

Style a component based on its container's size rather than the viewport.

Intermediate

.card-wrap { container-type: inline-size; }
@container (min-width: 30rem) { .card { display: flex; } }

Components adapt wherever they're placed.

Spotted a mistake or want to add detail? Suggest an improvement — Content Contributors' edits are reviewed by editors before they go live.

Discussion (0)