Ionic 2 responsive grid

user_2602816 0
Viewed 14180

How can I make a responsive grid in Ionic 2? Ionic 1 supported reserved classes like responsive-md or responsive-sm that made grids responsive, but they don't seem to work in Ionic 2.

In my case I have an <ion-row> with three <ion-col>. I would like the columns to drop below each other when the display width drops below a threshold. Is it possible to do this with Ionic 2?

ionic2 ionic-framework
3 Answers

Update for Ionic 2, Ionic 3+:

Ionic now have an amazing grid system base on flexbox css. You can see in the docs.
To use it, just simple like that:

<ion-grid>
  <ion-row>
    <ion-col col-3></ion-col> //This col will take 3/12 = 25% width;
    <ion-col col-4></ion-col> //This col will take 4/12 = 33.33% width;
    <ion-col></ion-col>       //This col will take the rest of width;
  </ion-row>
</ion-grid>
user_42546810
Related