How can i create a masonry layout using ion-grid?

I want to create a ui like giphy. Pic of the ui is given below.

How can I create this masonry grid layout using ion-grid where adjacent columns heights are not same. I could create a satisfactory masonry grid layout using 2 column in grid and each columns contains multiple ion-card. Though scrolling is working in web, it is not working in android build. what could be the reason for it. For scrolling I used ion-infinite-scroll.

<ion-grid>
        <div *ngIf="!isSomeGiphiesLoaded() && loadingNext" align="center" class="div-center">
            <ion-spinner style="transform: scale(2)"></ion-spinner>
        </div>
        <app-no-item-found [label]="'No search results found!'" *ngIf="!isSomeGiphiesLoaded() && !loadingNext"></app-no-item-found>
      <ion-row>
        <ion-col size="6">
          <ion-card class="ion-no-margin ion-no-padding"
                   *ngFor="let giphy of giphiesLeft; let i = index">
            <app-giphy-view [giphy]="giphy"></app-giphy-view>
          </ion-card>
        </ion-col>
        <ion-col size="6">
          <ion-card class="ion-no-margin ion-no-padding"
                    *ngFor="let giphy of giphiesRight; let i = index">
            <app-giphy-view [giphy]="giphy"></app-giphy-view>
          </ion-card>
        </ion-col>
        <ion-infinite-scroll *ngIf="queryString===''" (ionInfinite)="loadDataV2($event)" threshold="100px">
          <ion-infinite-scroll-content
                  loadingSpinner="bubbles"
                  loadingText="Loading more gifs...">
          </ion-infinite-scroll-content>
        </ion-infinite-scroll>
        <ion-infinite-scroll *ngIf="queryString!==''" (ionInfinite)="loadSearchedData($event)" threshold="100px">
          <ion-infinite-scroll-content
                  loadingSpinner="bubbles"
                  loadingText="Loading more gifs...">
          </ion-infinite-scroll-content>
        </ion-infinite-scroll>
      </ion-row>
    </ion-grid>