askides/react-plock

Longer elements mess up column layouts

Opened this issue ยท 4 comments

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

image

Can confirm:

image

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.

@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 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 :)