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