Menu
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?
891
By default, the grid will take up 100% width. To set a maximum width based on the screen size add the fixed attribute.
Working with the Ionic Grid System is straightforward. There are two main classes – row for working with rows and col for columns. You can choose as many columns or rows you want. All of them will adjust its size to accommodate the available space, although you can change this behavior to suit your needs.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
