Masonry fluid sizing with fixed pixel gutter height inconsistency

[sebszocinski]

Issue: When resizing the window, the height of the stamp compared to two normal blocks with fixed pixel gutter will be inconsistent. Masonry should re-calculate the 10px gutter as a percentage based off the block width.

It's only a few pixels but very frustrating to a designers eye.

You will notice when resizing sometimes the blocks below the stamp (third row) will swap left and right depending on the height of the stamp vs the 4 single blocks next to it.

See demo: http://codepen.io/anon/pen/Wwqroj

[desandro]

Thanks for submitting this issue.

It's only a few pixels but very frustrating to a designers eye.

True. Masonry behavior is designed for better performance in the browser. Its resize behavior is triggered after window resizing is complete, only once, rather than multiple times while being resized. I believe that users very rarely resize their browser window. But designers often do while browser testing. This issue may be irksome while you are designing, I feel its the best experience for your users.

I appreciate your feedback. Masonry works this way by design.

[sebszocinski]

Hi desandro,

Thanks for the quick response but I think you're miss understanding the issue. (Actually now that I read my post again It was me that didn't make it clear).

It's not an issue on "resizing" but the issue only occurs on certain window sizes (not all) that's why I said to test it by resizing your window so you can spot the inconsistency, so some window sizes will get it pixel perfect (where that percentage is equal) and some will see a few pixels off, and i think its to do with the fixed pixel gutter (10px in my example).

Cheers

[desandro]

Ah thanks for clearing that up. Yeah, these pixel mismatches can happen. It's a difficulty of dealing with CSS sizes being measured in JavaScript. A rounded pixel here or there can throw off the layout.

I'm considering a PR to the Masonry layout algorithm that would address this smaller mismatches. See desandro/masonry#811