Viewport vs container breakpoints is one of the most common decision points we see. Here is the honest breakdown.
The short version#
When the page width lies about the component.
Point by point#
| Aspect | Analysis |
|---|---|
| Viewport | Page-level truth: navbars, grids, heroes |
| Container | Slot-level truth: sidebars, widgets, split panes |
| Mix | Default viewport; reach for @container inside columns |
| 3.1 | Both grammars share screen names (md:, lg:) |
Bottom line#
Pick based on your constraint, not ideology — and remember the comparison pages link to hands-on recipes so you can verify the claim in your own project within minutes.
Related comparisons#
comparisons/index|All comparisons