Examples
Examples
Try the starting example
- Measured component widths (CSS px)
- 180,220,160
- Gap between adjacent components (CSS px)
- 16
- Left plus right padding (CSS px)
- 32
- Test viewport widths (CSS px)
- 400,600,800
- No-wrap minimum viewport (CSS px)
- 624
- Viewport overflow [width,extra px]
- [[400,224],[600,24],[800,0]]
- Prefix row breakpoints (CSS px)
- [212,448,624]
Try another scenario
- Measured component widths (CSS px)
- 180,220,160
- Gap between adjacent components (CSS px)
- 24
- Left plus right padding (CSS px)
- 32
- Test viewport widths (CSS px)
- 400,600,800
- No-wrap minimum viewport (CSS px)
- 640
- Viewport overflow [width,extra px]
- [[400,240],[600,40],[800,0]]
- Prefix row breakpoints (CSS px)
- [212,456,640]
Calculation method
Calculation method
No-wrap minimum viewport (CSS px)
sum(a)+max(0,len(a)-1)*b+c
Viewport overflow [width,extra px]
J([[v,max(0,sum(a)+max(0,len(a)-1)*b+c-v)] for v in d])
Prefix row breakpoints (CSS px)
J([sum(a[:i])+max(0,i-1)*b+c for i in range(1,len(a)+1)])
Symbols and units
- a
- Measured component widths (CSS px)
- b
- Gap between adjacent components (CSS px)
- c
- Left plus right padding (CSS px)
- d
- Test viewport widths (CSS px)
Use the units shown. A list keeps the order in which you enter its values. The symbol ^ means “raised to the power of”.
Calculation steps and notation
sum(list) adds all entries in the list.
Assumptions & limits
Assumptions & limits
- Fixed-width components in source order, constant gap/padding, no shrinking. Prefix breakpoints identify where another component can join a row; variable intrinsic sizing and nested CSS rules not inferred. Supported limits: All numeric inputs must be finite. Only the explicitly described mathematical scenario is supported.
Are these inputs private?
These calculations run in your browser. A shared link contains the values you choose to share. Only questions submitted to the separate AI finder are sent to OpenAI.