Ionic 4 Virtual scroll with wrapping items for large screens

I am revisiting the Virtual scroll in Ionic 4, to see if I can now get it to do what I have always been after.

I have a list (which can be very large, depending on server data), so I want it to be virtual. Also, on larger screens, I would like to display 2 (or perhaps 3) items side be side, rather than a single column (which is what we want for phone size screen in portrait).

I have the following setup…

<ion-content padding>
  <ion-virtual-scroll  [items]="items" approxItemHeight='40px'>
    <ion-item id='outer' *virtualItem="let item">
     <div id='container'>
      <ion-img style="margin-right:10px" [src]="item.img"></ion-img>
      <div style='display:grid'>{{item.text}}</div>

And in the scss…

  display: grid;
  grid-template-columns: 30px auto ;
  grid-template-rows: 40px;
  justify-items: center;
  background: lightblue;
  width: 100%;

  display :grid;
  grid-template-columns: stretch ;

@media screen and (min-width: 800px) {
    grid-template-columns: 50% 50%  ;

So I have set the #outer id to each of the ion-item, and then use the media query to adjust the widths.

I have also tried with just floats widths etc rather than css grid, but nothing seems to get them to move up so more than one on each row,

I see the widths adjusting as expected as I resize the browser window…

But my items are not wrapping.

Does anyone know if this is possible, and if so, how I can do this?

Thanks in advance!

I am starting to think this is not current;y supported, so have opened a feature request here

Is there any plans to support this or current workarounds?

I had same problem and i tried to make a trick:
fetching array index with pipe and pass it to virtual scroll items solve my problem.

try to resize screen in stackblitz:


Thankyou I will check this out!

Just curious, will it support the list changing, i.e. in my case I poll live data, and sometimes the items in the view are added or removed (as well as just fields updated), so the list is not static

it must working but if dont, add tracBy to your ngfor