Ionic framework 如何在列和行中显示卡

我试图建立一个简单的网格，其中有一张卡，我需要显示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>

在爱奥尼亚是基于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>

....

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