Container Queries in Production: Real-World Use Cases

Container queries shipped to all major browsers in late 2023 and I've been using them in production since. After a year, the component authoring model has fundamentally changed — cards, sidebars, and data tables no longer need to know where they live on the page.

The Core Pattern

/* Establish a containment context */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* Respond to the container, not the viewport */
@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    gap: 1.5rem;
  }
  .card__image {
    width: 200px;
    flex-shrink: 0;
  }
}

• check_circleUse container-type: inline-size for most cases — size queries are still rare
• check_circleName your containers to avoid querying an unintended ancestor
• check_circleContainer queries work inside Tailwind via the @tailwindcss/container-queries plugin
• check_circleThey compose naturally with CSS Grid — let the grid define width, let containers handle layout