A card that reads its own container, not the window
Deploy hook
Runs on every push to main.
drag the corner →
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
Questions
Why is my container query not matching anything?
An element cannot query itself. container-type goes on a wrapper and the query targets its children, so every queried component needs one box more than you expected — that, or a missing container-type altogether, is nearly always the cause.
Does declaring a container change anything else about the box?
Yes, and it is easy to miss: it also applies layout containment, which makes that box the containing block for position: fixed descendants. An overlay inside one anchors to the card rather than the viewport.
Container queries or media queries?
A media query asks about the window, which is the wrong question for a component that appears in a sidebar on one page and full width on another. Ask the container and the component answers correctly wherever it is dropped.