Notes
June 12, 2026 · 1 min read
Container queries killed our breakpoint file
A card should ask how wide it is, not how wide the window is.
Text
We used to keep a file of breakpoints and a mental map of which components were allowed to change at which one. It was the single largest source of layout bugs in every project, and every bug had the same shape: a component that looked right in the place we designed it and wrong in the place someone else used it.
The card in this theme changes layout at 470 pixels of its own width. In a three-up grid on a desktop it stacks; in a two-up it goes horizontal; in a sidebar it stacks again. None of that is described anywhere except once, on the component.
The cost
Declaring a container creates a containment context, which means the element can no longer be sized by its own contents in the containment direction. That is almost always what you want for a card and almost never what you want for a body of text. Reach for it deliberately.
Next
Tell us what youare actually trying to do.
Most engagements start with a ninety-minute call and a one-page note back. No deck, no discovery invoice.