Ionic 2 响应式网格布局，具有基于屏幕大小的固定列数答案

【问题标题】：Ionic 2 responsive grid layout with fixed number of columns based on screen sizeIonic 2 响应式网格布局，具有基于屏幕大小的固定列数
【发布时间】：2017-05-11 14:18:41
【问题描述】：

我四处搜索，但找不到如何根据 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 列。

【问题讨论】：

标签： twitter-bootstrap ionic-framework grid ionic2

【解决方案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>

【讨论】：