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?