@container

A card that reads its own container, not the window

CaveatAn element cannot query itself. The container-type goes on a wrapper and the query targets its children, so every queried component needs one box more than you expected.

FallbackDeclaring a container also applies layout containment, which makes that box the containing block for position: fixed descendants. A fixed overlay inside one anchors to the card, not the viewport.

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

@container (min-width: 210px) {
  .row { grid-template-columns: 62px 1fr; }
}

Published 7 Aug 2026