I'm very new to Ionic 2 and I'm facing a design problem with ion-grid.
I want to have three elements. On tablet or greater they should all be aligned in one row (side by side), but the first element should have a width of 80% and the other two a width of 10%.
On a smartphone the three rows should be stacked horizontally.
According to the grid docu
<ion-col col-12 col-sm>
Make use of the breakpoints (eg.
col-md-8). Combining a set of these you can set different column-width for different screen sizes.
In my example
col-12 means that the
<ion-col> should have a column-width of 12 (full width) for the smallest screens. This rule will apply for all bigger screens unless there is another breakpoint is present.
col-md-8 makes the
<ion-col> have a column-width of 12 on screen sizes with
min-width: 768px and bigger.
<ion-grid> <ion-row> <ion-col col-12 col-md-8 style="background-color:blue; height:100px;"></ion-col> <ion-col col-12 col-md-2 style="background-color:green; height:100px;"></ion-col> <ion-col col-12 col-md-2 style="background-color:yellow; height:100px;"></ion-col> </ion-row> </ion-grid>
My example uses the default number of columns per row which is 12. With this you can not achieve 80%/10%/10%-width for your columns. But you can change the number of columns per row to achieve this, see the documentation for more info.