Free Responsive Breakpoint calculator with clear step-by-step results.
Resolves a grid at a specific viewport: content width is the viewport minus outer gutters and capped at the maximum, gutters between columns are subtracted, and what remains divides into columns. The comfortable-column figure uses a 220 px minimum, below which layout columns become unreadable.
Column width
Column = (content width - gutter x (columns - 1)) / columns
Usable content width
Content = min(maximum content width, viewport - 2 x gutter)
Where the layout breaks, not at device widths. Increase the viewport until a column falls below its readable minimum or a line becomes too long - that is the breakpoint.
It fits roughly 30-35 characters at a normal body size, near the lower bound of comfortable reading. Narrower columns produce ragged, hyphen-heavy text.