htmlcssangularionic2

Ionic2 grid with equal height content


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?


Solution

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

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

    and now it works as intended!