离子如何在列和行中显示卡片答案

【问题标题】：Ionic how to show card in col and row离子如何在列和行中显示卡片
【发布时间】：2019-12-17 03:57:44
【问题描述】：

我正在尝试构建一个简单的网格，其中有一张卡片我需要以 2x2 格式显示卡片。

<ion-row>
    <ion-col *ngFor="let data of dataa" > let assume it will be 10
        <ion-card style="width: 200px;">

          <img src="assets/imgs/shoe-air.jpg">

          <ion-row>
            <ion-col>
                <ion-badge>Available</ion-badge>
            </ion-col>
            <ion-col style="text-align: right; font-size: 20px;">
                <ion-icon name="heart" color="secondary" ></ion-icon>
            </ion-col>
          </ion-row>

           <ion-button class="offer">{{(2500 - 2000) /2500*100}}%</ion-button>
           <p><span class="regular-price" >RS. 2000<span class="special-price"><del>&nbsp;&nbsp;&nbsp;&nbsp;RS. 2500</del></span></span></p>

        </ion-card>
    </ion-col>
</ion-row>

它只是一个模板，所以只有一张卡片。但是当错误获取数据时，它将是 9 或 8。我需要这样展示

2x2
2x2
2x2

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

The responsive grid 在 Ionic 中基于 12 列布局。

如果您想要一个 2 列宽（每列占 50%）的网格，请在列上设置 size=6，如下所示：

<ion-grid>
  <ion-row>
    <ion-col size="6" *ngFor="let data of dataa">
      <ion-card>
          ....
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

【讨论】：