Mobile-First Breakpoint Cascade Simulator (2D)

Viewport

Viewport width 375px

Breakpoint Density

Layers defined 5

Breakpoints (edit min-width & overrides)

min-wColumnsFont pxPad px

Cascade Breakdown

How it works

This is a real CSS cascade resolution, not a lookup table. Each breakpoint below is a @media (min-width: …) rule that may override zero or more of three layout properties (columns / font-size / padding). The engine walks breakpoints in ascending min-width order and, for every one whose threshold the current viewport satisfies, overwrites only the properties that breakpoint actually defines:

for bp of breakpoints.sortedAscendingByMinWidth:
  if viewport >= bp.minWidth:
    for prop in bp.overrides:
      computed[prop] = bp.overrides[prop]   // later wins, per property

That "per property" part matters: the single largest matching breakpoint might not define every property, so its computed value can come from an earlier breakpoint that last touched it — exactly how a real browser resolves competing rules of equal specificity in source order. Toggle a property off on a breakpoint (uncheck it) and watch the breakdown panel show an earlier source winning that property again.

Viewport slider — moves the marker through the ordered breakpoint list.
Breakpoint density — how many rows are active (3–6), base layer always included.
Per-row checkboxes — whether that breakpoint overrides a given property at all.
Breakdown panel — the final computed value of each property and exactly which breakpoint's rule it came from.

⚠ Couldn't load the 2D engineCanvas 2D context failed to initialize.