🧱 Masonry Grid Repositioning Glitch During Layout Width Changes

[Weiting-Zhang]

Thanks for the great work! When using this lib, I met an issue as below:

Is your feature request related to a problem? Please describe.

When the layout of my page changes—such as toggling a sidebar that alters the content width—the masonry grid attempts to reposition itself based on the new dimensions. During this transition, the grid items sometimes overlap slightly or leave unintended gaps between them, resulting in a visually jarring experience for users.

Here’s a rough demo to illustrate the issue:

https://codesandbox.io/p/sandbox/masonic-example-forked-xq5fsh, update the columnWidth to 300

resize.mp4

We could see the grid items are overlapping or leaving unintended gaps. Below is a screenshot that the grid items are almost overlapping:

In my actual use case, toggling the sidebar causes significant changes to the content width, which makes the visual glitches during grid repositioning even more noticeable and disruptive to the user experience.

Describe the solution you'd like

Is there a possible solution to scale the grid items during repositioning—while maintaining consistent gaps between them—assuming the number of columns remains unchanged? This would help smooth out the transition and avoid visual glitches. Something similar to the behavior implemented by Sora:

stable-reposition.mp4