Ionic2 grid with equal height content

Question

I'm trying to make a grid of 1-row * 2-col as follows:

<ion-grid>
    <ion-row *ngFor="let products of productsArray">
      <ion-col center text-center col-6 *ngFor="let product of products">
        <ion-card (click)="onProductClick(product)">
          <ion-badge *ngIf="product.on_sale" class="badge-onSale" item-right>Sale</ion-badge>
          <img src="{{product.featured_src}}" />
          <ion-card-content>
            <ion-card-title style="font-size: 100%">
              {{ product.title | StripHTML }}
            </ion-card-title>
          </ion-card-content>
          <ion-row center text-center>
            <p style="color: red">
              {{ product.price_html | StripHTML:{split:" ",index:0} }}
            </p>
          </ion-row>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

Due to the difference of each card->content-height the cards/rows aren't in equal height , how would I tackle that?

Answer 1

I fixed it , by adding these styles to ion-col

.product-col{
  display: flex;
  justify-content: center;
}

and now it works as intended!