Container queries allow component styles to adapt directly to their parent container size rather than the global viewport width.

Step 1: Define the container

Declare the container context on the parent card:

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

Step 2: Write container query rules

Adapt the internal child elements based on available width:

@container card (min-width: 420px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
  }
}

Key takeaways

  1. Container queries eliminate brittle page-level media query overrides.
  2. Perfect for editorial cards placed in varying column grids.