Percentage fluid width column breaks/clears incorrectly on 40/60

[leepowers]

For two columns, fitted as 40/60 percentage fluid width:

40/60 Test case: https://codepen.io/leepowers/pen/OwyBdQ

Works correctly with 50/50 columns.

50/50 Test case: https://codepen.io/leepowers/pen/gjaQOv

Expected: 40/60 columns should fit into a masonry grid, same as 50/50 columns.

Error: Instead, bricks in 40/60 columns break onto a new row, leaving whitespace to the right of bricks.

Tested on:

Chrome 67, OS X 10.10.5: https://www.whatsmybrowser.org/b/QHKQZ3J Firefox 61, OS X 10.10: https://www.whatsmybrowser.org/b/PUD38YL Safari 10, OS X 10.10.5: https://www.whatsmybrowser.org/b/RX8QRHF

[desandro]

columnWidth should be set to the highest common denominator of the item widths. So for items with 40% and 60% width, columnWidth should be set to 20%. See demo on CodePen

.grid-sizer { width: 20%; }

[ram33]

@desandro Thanks for the great library. It is still seem to be problem with %widths.

If I set default item width to 40%, it's working as expected. Here If I set default item width to 50%, it's not working as expected. Here

[ram33]

@desandro Ok.. columnWidth should consider all widths when calculating GCD. Setting it 10 (GCD of 40, 50 and 60) fixed the issue.