Sebastian Sebastian -3 years ago 155
HTML Question

Ionic: Stacked and custom sized grid rows

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.

enter image description here

According to the grid docu

<ion-col col-12 col-sm>
can be used for the horizontal stacking and it is working.

Unfortunately I'm not able to achieve this 80/10/10 design. With
col-12 col-sm
the elements will be aligned with equal width.

Answer Source

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.

Example HTML:

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

Result:

Small screen:

enter image description here

Bigger screen:

enter image description here

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download