Ionic 2 responsive grid layout with fixed number of columns based on screen size

4
votes

I searched around but could not find how to implement a grid layout which has different but predetermined number of columns based on screen size on Ionic 2.

What I need: I need to show a grid of items which has 2 columns on small screen width, 3 columns on medium screen width and 4 columns on large screen width. The columns will be of equal width and will fill the screen width completely. If I was using Bootstrap I would have done it like this.

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

What I found: I found that the Ionic 2 framework includes "responsive-sm", "responsive-md" and "responsive-lg" attributes that make a row with multiple columns break into a single column with full screen width. But there is no way to fix the number of columns so its either X number of columns or 1 column.

1
twitter-bootstrapionic-frameworkgridionic2

1 Answers

0
votes

With the recent version of Ionic, this is now fairly easy to do using the Grid API (https://ionicframework.com/docs/api/components/grid/Grid/).

Here is a sample code.

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