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?