イオン2応答グリッドレイアウト

Question

私の周りに検索けど

イオン2の画面サイズに基づいて、列の異なるが、決められた数のグリッドレイアウトを実装する方法を見つけることができませんでした

私が必要としているもの： 小さな画面幅で2列、中画面幅で3列、大きな画面幅で4列の項目のグリッドを表示する必要があります。列の幅は等しく、画面幅を完全に埋めます。私がブートストラップを使用していたなら、私はこれをこのようにしたでしょう。私は、イオン2フレームワークは、「応答-SM」が含まれることが判明し、「応答-MD」と複数の列と行を作る「応答-LG」属性は単一に侵入：私が見つけた何

<div class="row"> 
    <div class="col-sm-6 col-md-4 col-lg-3"></div> 
    <div class="col-sm-6 col-md-4 col-lg-3"></div> 
    <div class="col-sm-6 col-md-4 col-lg-3"></div> 
    <div class="col-sm-6 col-md-4 col-lg-3"></div> 

    <div class="col-sm-6 col-md-4 col-lg-3"></div> 
    <div class="col-sm-6 col-md-4 col-lg-3"></div> 
    <div class="col-sm-6 col-md-4 col-lg-3"></div> 
    <div class="col-sm-6 col-md-4 col-lg-3"></div> 

    <div class="col-sm-6 col-md-4 col-lg-3"></div> 
    <div class="col-sm-6 col-md-4 col-lg-3"></div> 
    <div class="col-sm-6 col-md-4 col-lg-3"></div> 
    <div class="col-sm-6 col-md-4 col-lg-3"></div> 
</div> 

フルスクリーン幅の列。しかし、列の数を固定する方法はありませんので、Xの列数または1の列のいずれかになります。

Answer 1

Ionicの最新バージョンでは、Grid API（https://ionicframework.com/docs/api/components/grid/Grid/）の使用がかなり簡単になりました。

ここにサンプルコードを示します。

<ion-grid> 
    <ion-row wrap> 
     <ion-col col-12 col-md-6 col-lg-4 col-xl-3 *ngFor="let package of arrayPackages">    
      <div text-center> 
       <img [src]="package.urlImage"> 
      </div> 
     </ion-col> 
    </ion-row> 
</ion-grid>