在离子网格中将离子卡设置为相同大小

Question

嗨，我正在构建一个目录应用程序，我正在显示一些项目，但它们以不同的尺寸显示，我无法实现以相同尺寸显示离子卡

<ion-content [fullscreen]="true">
<ion-grid > 
<ion-row *ngFor = 'let item of items'>
<ion-card>
<ion-img  [src]='item.imagePath'></ion-img>
<ion-header>
<ion-card-title class='ion-text-center'> {{ item?.title }} </ion-card-title>
<ion-card-subtitle class='ion-text-center'> {{ item?.price }} </ion-card-subtitle>
</ion-header>
<!-- <ion-card-content class='ion-text-wrap'> {{ item?.description }} </ion-card-content> -->
</ion-card>
</ion-row>
</ion-grid>
</ion-content>

外观如何 在此处输入图像描述

Answer 1

您需要将每一行包装在一列中。

<ion-grid>
<ion-col size="12">
<ion-row *ngFor = let item of items'>
<ion-card>
<ion-img  [src]='item.imagePath'></ion-img>
<ion-header>
<ion-card-title class='ion-text-center'> {{ item?.title }} </ion-card-title>
<ion-card-subtitle class='ion-text-center'> {{ item?.price }} </ion-card-subtitle>
</ion-header>
<!-- <ion-card-content class='ion-text-wrap'> {{ item?.description }} </ion-card-content> -->
</ion-card>
</ion-row>
</ion-col>
</ion-grid>

在你的CSS中这样做....

ion-card{
display: flex;
flex-direction: column;
width: 100% !important;
margin: 0 !important;
}