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?
I fixed it , by adding these styles to ion-col
.product-col{
display: flex;
justify-content: center;
}
and now it works as intended!