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>

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

1 个答案: