search

askides / react-plock

The 1kB Masonry Grid for React.
https://react-plock-with-nextjs.vercel.app
MIT License
493 stars 10 forks source link

Longer elements mess up column layouts #45

Open neontomo opened 4 months ago

neontomo commented 4 months ago

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
rikers commented 3 months ago

Can confirm:

image

askides commented 1 month ago

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 commented 1 month ago

@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 commented 4 weeks ago

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