Container queries: field notes

Media queries ask how wide the viewport is. Container queries ask how wide the component's parent is — which is almost always the question you meant.

The minimum setup

.card-grid {
  container-type: inline-size;
}

@container (min-width: 36rem) {
  .card {
    grid-template-columns: 12rem 1fr;
  }
}

Things that catch people out

• An element cannot query itself. Put container-type on a wrapper.
• inline-size containment means the container no longer sizes to its content horizontally. Give it a width from its own parent.
• Container query units such as cqi are relative to the nearest container, which makes fluid type inside components straightforward.