How do container queries work?

A container query needs an ancestor that establishes a query container. The element itself cannot be its own container; its descendants query the nearest eligible ancestor with a matching name or type.

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

@container card (min-width: 30rem) {
  .card {
    display: grid;
    grid-template-columns: 8rem 1fr;
  }
}

Key details

• container-type: inline-size establishes inline-size containment
• container-name lets you target a specific ancestor
• Container query length units such as cqw and cqh refer to the query container
• Only descendants can query a container, not the container itself
• A container cannot be sized by its descendants on the contained axis

This is the component-level counterpart to media queries. A card can switch to a horizontal layout when its own container is wide, even if the viewport is narrow because the card sits in a sidebar.