Responsive Breakpoint

Free Responsive Breakpoint calculator with clear step-by-step results.

About Responsive Breakpoint

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.

Formulas

Column width

Column = (content width - gutter x (columns - 1)) / columns

Usable content width

Content = min(maximum content width, viewport - 2 x gutter)

Worked example

With the default values below, Responsive Breakpoint returns Column width at this viewport of 38.00. Change any input above and every figure here is recalculated in your browser.

Inputs used

Design canvas widthminimum 100 px: 1,440 px
Maximum content widthminimum 100 px: 1,200 px
Gutter between columnsminimum 0 px: 24 px
Grid columnsaccepts 1–24: 12
Viewport to evaluateminimum 100 px: 768 px

Results

Column width at this viewport: 38.00 px
Usable content width: 720.0 px
Scale relative to the design canvas: 0.5333 x
Comfortable content columns (220 px minimum): 3

Step by step

1Values used
2Column width
3Usable content width
4Column width at this viewport= 38.00 px
5Usable content width= 720.0 px
6Scale relative to the design canvas= 0.5333 x
7Comfortable content columns (220 px minimum)= 3

Assumptions and limits

The result is derived only from the 5 inputs listed above. Anything not among them is not part of the calculation.
In particular, this calculator does not take inflation, tax, fees or charges or compounding frequency into account.
Figures are rounded for display to 4 decimal places, so totals built from several rounded parts can differ slightly from the unrounded arithmetic.

How these calculators are built and tested is described on the Methodology page. If a figure looks wrong, please report it.

Frequently Asked Questions

Where should breakpoints go?

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.

Why 220 px as a minimum column?

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.