Virtual-scroll and ion-row/col

Ionic Framework
1

Hi, i was trying to mix virtual-scroll and row/col to make the items responsive depending on screen size and I thought ion-col would be perfect. I tried with this:

<ion-virtual-scroll [items]="apples" approxItemHeight="500px">
    <ion-card *virtualItem="let m">
      <div>
        <ion-img class="front_img" src="assets/imgs/apples/{{m.img}}" ></ion-img>
      </div>
      <ion-card-title>
        <ion-text color="primary">
          <h1>{{m.name}}</h1>
        </ion-text>
      </ion-card-title>
      <ion-card-content class="description">
        <span > {{ m.desc[lang] }}</span> <br>

      </ion-card-content>
      <ion-card-content class="show-more">
        <u (click)="goTo(m.id)"> .. {{ 'OPTION.more' | translate }}</u>
      </ion-card-content>
    </ion-card>
  </ion-virtual-scroll>

But i’m facing 2 issues:

  1. I don’t know the exact height of every card so I can’t put a value in approxHeight which cause empty spaces or overlay of cards in my app. Is there any workaround? (only thing I can think of is cap the height at N px and set overflow to hidden).

  2. I can’t make sizeXl="6" sizeLg="6" sizeMd="6" sizeSm="6" sizeXs="12" work for ion-col because the app is just ignoring them, the cols will be on different rows no matter what…

Have anyone else faced this (or these) issue/s ??

Thanks!