How to has responsive grid layout in Ionic 2


#1

It is very unclear how to create a responsive layout grid in Ionic 2. Hope someone can share some light in this topic.

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


#2

r u create responsive grid? if yes then please share your code with me


#3

@Hughred22 @varshil29
did you found a solution for it?
can you share it with us?? thx


#4

nope still i am search for that…