Article cards on the home page had a layout bug that only showed up in one specific spot: the tag page for a tag with exactly two posts, rendered at a particular viewport width. The card’s title would wrap awkwardly and collide with the tag pills below it. I’d patched around it with a viewport-width media query twice, and both patches broke again the next time I touched the grid.
Why the media query kept failing
The actual problem was never the viewport. It was the card’s own width, which changes depending on how many columns the grid puts it in, which depends on the page — home page, tag page, and any future layout that reuses the card component. A media query only knows about the viewport; it has no idea how wide the card actually ended up.
.card {
container-type: inline-size;
}
@container (max-width: 22rem) {
.card-title {
font-size: 1.1rem;
}
}Switching to a container query fixed it in one change, because the query now asks the actual thing that matters — how wide is this card, in this layout, right now — instead of a proxy for it. The two prior patches were both technically correct guesses about viewport widths that happened to correlate with the card being narrow in one specific layout. The container query doesn’t need to guess.