Ionic framework 如何在离子2中具有响应性离子网格

我有一个卡的列表，我需要在小型设备中显示1列，在中型设备中显示2列，在大型设备中显示3列

基于，我尝试了以下代码，但最终没有成功

一,

在小型设备上显示正确，在大型和中型设备上仅显示2张卡

二,

在小型设备上显示正确，在大型和中型设备上显示1列，所有卡都在该列中

三,

---

在小型设备上显示正确，在中型和大型设备上仅显示1列，该列中显示卡片

我找到了解决方案，以防其他人有相同的问题

我在我的第一个代码中添加了wrap，它可以正常工作

  <ion-row  responsive-sm wrap>
    <ion-col *ngFor="let card of cards" width-50>
      <ion-card >

---

我在下面的HTML中添加了代码，它对我有用

 <ion-row class="categoryView">
        <ion-col class="gridCol" width-40></ion-col>
        <ion-col class="gridCol" width-40></ion-col>
      </ion-row>

ion-col.gridCol.col {
      height: 80px;
      background: azure;
      margin: 10px;
  }

  ion-row.categoryView.row {
      height: 100px;
      background: black;
  }

离子色谱柱{
高度：80px；
背景：蔚蓝；
利润率：10px；
}
ion-row.categoryView.row{
高度：100px；
背景：黑色；
}

  <ion-row  responsive-sm>
    <ion-col>
      <ion-card *ngFor="let card of cards">

  <ion-row  responsive-sm wrap>
    <ion-col *ngFor="let card of cards" width-50>
      <ion-card >

 <ion-row class="categoryView">
        <ion-col class="gridCol" width-40></ion-col>
        <ion-col class="gridCol" width-40></ion-col>
      </ion-row>

ion-col.gridCol.col {
      height: 80px;
      background: azure;
      margin: 10px;
  }

  ion-row.categoryView.row {
      height: 100px;
      background: black;
  }