CODEWITHSUNDEEP
ionic-frameworkresponsive-designflexboxionic2
Hugh Hou
Hugh Hou

Reputation: 2384

How to get a responsive grid layout in Ionic 2

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?

Upvotes: 3

Views: 7667

Answers (2)

Sandeep Sharma
Sandeep Sharma

Reputation: 1885

Now Ionic is using Bootstrap grid system. We can easily do this using fixed attribute on ion-grid.

Upvotes: 2

trungvose
trungvose

Reputation: 20034

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

  1. In mobile device show every col as full-width.
  2. 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>

Upvotes: 3

Related Questions