MasonryInfiniteGrid – Variable column width?

[intelligence]

Looking for a masonry grid that supports variable width of columns. Seems like this currently is not supported? In my specific use case there some items that are 50% width and some that are 25% width. The height of the items are variable too.

[daybrush]

@intelligence

Is width: 25% the main? width: 50% is main?

My example is based on width: 25% as the main

<div class="item width25"></div>
<div class="item width25"></div>
<!--  data-grid-column="2" (25 x 2) or  data-grid-column="0" (variable size) -->
<div class="item width50" data-grid-column="2"></div>
<div class="item width25"></div>

[intelligence]

Hey, thanks for following up so quickly @daybrush, appreciated!

I tested it out quick in my app and was having some issues, doing a reduced test case it seems like it works better (in my actual app items would overlap). Here's my demo: https://codesandbox.io/s/zealous-hugle-mjsr4p?file=/src/App.js

Is it possible to achieve a tighter packing somehow? In some cases items with 25% width could fit beside each other, but there's a space. 6 and 7 could potentially be beside each other for example. 3 should probably come before 4 etcetera.

I know working on logic like this is not trivial, just asking if if there's some way to optimize :)

Thanks for a super nice and performant library! 🙏

[daybrush]

@intelligence

sorry it's a bug on our side

You can bypass it and set it like this: Try adding the following line to Item . data-grid-column={width === "w25" ? "" : "0"}

[intelligence]

That works much better, thanks!

Updated demo here: https://codesandbox.io/s/nifty-sunset-qd1djw?file=/src/App.js

I observed some other issues. At some widths, the layout "breaks"

Some tiny distance between the items occurs as well, difficult with rounding of pixels perhaps? 🤔

[daybrush]

@intelligence

This part is also a bug on our side.

Try setting it like this

data-grid-column={width === "w50" ? "2" : ""}

[intelligence]

Yeah, awesome!

https://codesandbox.io/s/vibrant-ishizaka-mhyl4h?file=/src/App.js

Just the small issue of tiny distances between some of the items that remains. Is this something you reckon can be fixed? Or is it too difficult to account for rounding? Maybe I could try sizing the container so that the items never go subpixel? But that will probably introduce some issue with repaints. What do you think?

Example: If the container width is 1000px, I get items of 250px each. But if I scale to 999px it will be 249.75px per item, introducing the small distances. But if I keep the container at 1000px, even though browser width is 999px, then 1px is not visible in the browser, but the distances is taken care of. Do you think this could lead to performance issues?

[daybrush]

@intelligence

Set this options:

useRoundedSize={false}
useTransform={true}

[malangfox]

Since there is no further comment, we will close the issue.