twitter-bootstrap - Ionic 2 响应式网格布局，根据屏幕尺寸固定列数

Question

我四处搜索，但找不到如何实现网格布局，该布局根据 Ionic 2 上的屏幕尺寸具有不同但预先确定的列数。

我需要什么:我需要显示一个项目网格，其中小屏幕宽度上有 2 列，中屏幕宽度上有 3 列，大屏幕宽度上有 4 列。各列的宽度相等，并完全填满屏幕宽度。如果我使用 Bootstrap，我会这样做。

<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>

我的发现:我发现 Ionic 2 框架包含“responsive-sm”、“responsive-md”和“responsive-lg”属性，这些属性使具有多列的行分解为一个全屏宽度的单列。但没有办法固定列数，因此要么是 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>