CSS Container Queries

Implement responsive components using CSS container queries that adapt based on parent container width not viewport.

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 400px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

Report a problem with this exampleOpens a pre-filled issue on GitHub.