Define custom breakpoints and see how a layout grid changes across screen widths with live resize handles.
This tool draws the layout grid your design will use and shows what it looks like at any screen width, so you can define breakpoints and watch the grid react before you write a line of CSS. You enter the pixel values where the layout should change - 480, 768, 1024, 1280 - and the grid's column count, then drive a live resize handle across the width scale. The most common surprise is that a breakpoint is a boundary, not a design: drag the handle between two values and the arrangement holds while columns simply grow.
A concrete input and expected output from the current implementation.
Input
Breakpoints: 480 / 768 / 1024 / 1280. Columns: 12. Read the grid with the handle at 900px (min-width convention).
Expected output
The handle reads 900px, which falls between 768 and 1024, so the active layout is the one defined for the 768px breakpoint. The grid shows 12 columns; they render wider than at 768px and narrower than at 1024px, but the arrangement does not change until the handle crosses 768 or 1024.
With mobile-first min-width breakpoints, each value is the lower edge of a range, so 900px belongs to the 768-1023 range and uses that range's layout. Column widths are fluid and scale continuously; only the arrangement is fixed per range.
The first controls take the breakpoint values - the pixel widths where the layout should change - plus the grid's parameters, typically the column count, gutter, and outer margins. The values are sorted and used to carve the width spectrum into intervals, one per layout. The grid is then drawn for the interval that contains the currently simulated width.
A draggable handle on the width scale simulates a viewport. Moving it left or right changes the simulated width continuously, and the grid redraws each time the width crosses a breakpoint. The active interval is marked so you can read which layout is in force at any width. Dragging inside one interval only rescales the columns, which is the difference between the layout changing and the viewport changing.
No. The tool shows the grid's geometry at any width, but real rendering - typography, image scaling, overflow, scrollbar width - only exists in an actual browser. Use it to plan breakpoints and catch structural problems early, then confirm in browser dev tools, where the viewport readout includes the scrollbar.
Under the min-width convention, yes at the boundary itself: 768 is the first width to use the 768px layout. But 769 and 1023 are the same layout even though the page looks different, because only the width changed, not the arrangement. The numbers define range edges, not designs.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.