🧱 Masonry Grid Repositioning Glitch During Layout Width Changes

Nobody has claimed this yet.

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`

https://github.com/user-attachments/assets/7c743d65-55ea-499c-8b0f-04c032aafc39

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:

https://github.com/user-attachments/assets/c44a08bd-bae4-47aa-a46d-71ef68ce4495

Start by reproducing the layout change in the linked CodeSandbox with columnWidth set to 300, then compare the overlap and gap behavior shown in the attached examples. Done means defining and implementing a confirmed approach that prevents visible glitches while the masonry grid repositions with the same number of columns.

Written by the indexing model from the issue text.