CSS Container Queries

CSS Container Queries — a practical guide to CSS container queries with clear examples you can reuse in real projects.

CSS Tutorial Series (86/109). Prefer one article? Read the complete CSS tutorial.

Short description

Container queries unlock truly modular component responsiveness.

Container query

.card-wrap { container-type: inline-size; }
@container (min-width: 400px) {
  .card { grid-template-columns: 8rem 1fr; }
}