Request - multiple items per row (grid system)

[KayvandenHeuvel]

I'm submitting a feature request
We want to use ui-virtualization with an grid system. At this moment it works great with items that are full width and have an fixed height, but fails when we use a system like 'Material Design Components' or 'Bootstrap'.

We have an page with a large array of components that are aligned with 3 items in 1 row and on smaller screen this goes to 2 items and eventually to just 1.

Current behavior:
UI-Virtualization puts a emtpy item infront of the first item. This adjusts the grid so the very first item isn't aligned properly. After that all the items are not in their correct position.

Expected/desired behavior:
It is disered that UI-Virtualization works with a variable grid system that can have multiple items per row.

[JordyvA]

That would be awesome. All the items still have the same height, but there are 3 items next to each other (or 2). The buffers on top / bottom should adjust their heights with the count of horizontal elements. The lazy loading needs to load 1 row (1, 2 or 3 items) instead of 1 all the time.

[elitemike]

I definitely would like this, I am trying to build a photoviewer that is putting 3 items per row

[bigopon]

What happens when 3 items don't fill up the whole row? Would it matter?

[mroeling]

What happens when 3 items don't fill up the whole row? Would it matter?

When none of the rows are filled with as many items as possible (as an example, assume 4 items can be placed in a row, but only 3 are put in each row), it would matter IMHO.
Another issue might be changing the width of the screen, hence changing the number of max items per row.

When I look at the code, I see that only item.height is taken into account. Perhaps it could be changed to use both item.top and item.height instead?

Still, I agree with @KayvandenHeuvel that it would be a great feature to support multiple items per row :)

As an addition: I only found just one other working example: https://coderiety.github.io/react-list/ , third-last item.

[bigopon]

This is a nice feature, though would require a bit of work, as Aurelia implementation tries to stay too unobtrusive, making it hard to calculate necessary variables.