Longer elements mess up column layouts

[neontomo]

trafficstars

When using the Masonry plugin, longer elements disrupt the optimal column layout, causing smaller elements following them to not align correctly. This issue impacts the visual consistency and balance of the layout, especially when displaying content with varying lengths.

Steps to Reproduce

Set up a layout using the Masonry plugin. Include elements of varying lengths, with some significantly longer than others. Observe how longer elements affect the layout of smaller elements in subsequent columns.

Expected Behavior

The Masonry plugin should maintain a balanced column layout regardless of the length of individual elements, ensuring that smaller elements are positioned optimally without being impacted by longer ones.

The Value Add

Pretty much all Masonry packages have this issue. If you solve it you are leaps ahead.

Image of issue

[rikers]

Can confirm:

[askides]

This is something that can actually be solved by implementing a different resolution for the items in the columns, but for this specific case would be mandatory to pass the actual height of the element, otherwise it will be not possible for the library to get it.

[DominikSerafin]

@askides I understand one of the goals of this library is to be super lightweight, but I wonder if adding this alternative layout resolution as an optional customization option or maybe as a separate (and tree-shakeable) component would be viable?

It would definitely help with my use case, where I do have access to original image dimensions. With that being said, it's already a pretty neat library, thank you :)!

[askides]

@askides I understand one of the goals of this library is to be super lightweight, but I wonder if adding this alternative layout resolution as an optional customization option or maybe as a separate (and tree-shakeable) component would be viable?

It would definitely help with my use case, where I do have access to original image dimensions. With that being said, it's already a pretty neat library, thank you :)!

Can be interesting, what would be your idea speaking about API design? Feel free to open a PR or share a draft by the way :)

[github-actions[bot]]

This issue has been automatically closed due to inactivity. If you still have further updates, please feel free to reopen or create a new issue.

[DominikSerafin]

Hey @askides, just saw your reply.

I might actually work on it in some near(ish) future, as I think it could also allow to keep the images always rendered through config changes and breakpoints transition (currently there's flash of empty render in those situations, which is somewhat separate issue I might need fixed for my use case).

If that happens I'll get back to you here. Thanks :)

[hussion]

same question. :(

[askides]

Happy news!

From the v3.4.0 it will be possible to use a useLayoutBalance flag, this will improve the balancing of the items to avoid the described problem.

This is completely an opt-in, so you can avoid to pass the flag if you don't care about it.

See the docs here.