Ionic 4: 2 column grid list virtual scroll issue

I am trying to do virtual scrolling on ionic 4 to display two column list, below piece of code without virtual scroll makes 2 column grid. But with virtual scrolling it's displaying only one. I don't know what I am doing wrong, any help will be appreciated.

<ion-row>
    <ion-virtual-scroll [items]="currentProducts">
       <ion-col size="6" size-sm="4" size-lg="3" no-padding *virtualItem="let product">
       <ion-card class="product" (click)="productSelected(product)">
         <ion-card-content>
           <div class="product">
               <ion-img [src]="product.thumbnails[0]" alt="brandLogo"></ion-img>
               <div class="product-text">
                   <h3 text-center>{{product.brand.name}}</h3>
                   <h5 text-center>{{product.name}}</h5>
                   <p text-center>{{product.itemNumber}}</p>
                   <h6 text-center>${{product.retailPrice}}</h6>
               </div>
           </div>
         </ion-card-content>
      </ion-card>
      </ion-col>
    </ion-virtual-scroll>
</ion-row>

This piece of code is without virtual scrolling, which displays two column grid list.

<ion-row>
    <ion-col size="6" size-sm="4" size-lg="3" no-padding *ngFor="let product of currentProducts">
       <ion-card class="product" (click)="productSelected(product)">
          <ion-card-content>
             <div class="product">
                <img src="{{product.thumbnails[0]}}" alt="brandLogo">
                <div class="product-text">
                    <h3 text-center>{{product.brand.name}}</h3>
                    <h5 text-center>{{product.name}}</h5>
                    <p text-center>{{product.itemNumber}}</p>
                    <h6 text-center>${{product.retailPrice}}</h6>
                </div>
             </div>
           </ion-card-content>
        </ion-card>
    </ion-col>
</ion-row>