How to get a responsive grid layout in Ionic 2

Question

It is very unclear how to create a responsive layout grid in Ionic 2. I hope someone can shed some light onto this topic.

I got a grid:

<ion-content class="home card-background-page" padding>
  <ion-row wrap>
    <ion-col>
      <ion-card *ngFor="let location of dataService.allLocationDetail.location | keys" (click)="openPage(location.data.locationId)">
        <img [src]="location.data.coverArt"/>
        <div class="card-title">{{location.data.name}}</div>
        <div class="card-subtitle">{{location.data.date}}</div>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-content>

I want the ion-col as a max-width of, let say 500px. Then if the view is larger than 500px like in a iPad landscape, I want the col wrap - 2 col in a row and they are center aligned. I added the wrap attribute on to the row and it does not seem to works.

Also, is there responsive grid in Ionic2? If so, how can I use it? I also want the ion-content has a max-width and will align center when the screen width is larger than the max-width. Right now, the ion-content is position absolute and won't allow center.

What is the best strategy to dong responsive layout with Ionic 2?

trungk18 trungk18 · Accepted Answer · 2016-07-20T08:33:19

@Hugh Hou: I found a good interesting answer here. Seem ionic 2 missing some documentation regarding responsive grid.

You should also refer to this following link for ionic 1 responsive grid. here

So in conclusion, to archive your goal.

In mobile device show every col as full-width.
In tablet device show 2 or more col in a row.

Try to do so

<ion-content class="home card-background-page" padding>
  <ion-row responsive-sm>      
    <ion-col>
      <ion-card *ngFor="let location of dataService.allLocationDetail.location | keys" (click)="openPage(location.data.locationId)">
        <img [src]="location.data.coverArt"/>
        <div class="card-title">{{location.data.name}}</div>
        <div class="card-subtitle">{{location.data.date}}</div>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-content>

How to get a responsive grid layout in Ionic 2

2 Answers