An Overview of the Grid Component in Ionic 2

Ionic 2 makes it super easy to create beautiful looking layouts. Most of the time you can just drop in the component you want to use and be on your way.

Sometimes, you will need to create more complicated layouts, though. Perhaps rather than a simple list, you want a list with three horizontal boxes at the top that show the user their heart rate, current pace, and distance travelled.

This is where the Grid component comes into play. Ionic 2 has a column and row based grid system built into the framework that you can use to create more complex layouts. In this video tutorial, I walk through the basics of how to use the Grid component in Ionic 2.

Here’s the video:

Video Notes

• The structure of a grid in Ionic 2 is as follows:

<ion-grid>
  <ion-row>
    <ion-col></ion-col>
    <ion-col></ion-col>
  </ion-row>

  <ion-row>
    <ion-col></ion-col>
    <ion-col></ion-col>
    <ion-col></ion-col>
    <ion-col></ion-col>
  </ion-row>
</ion-grid>

• You can nest rows and columns to create more complex layouts

• The width-X and offset-X attributes can be added to <ion-col> to control their width and positioning, where X is a percentage of the width.

• The wrap attribute can be used with <ion-row> to force columns that do not fit horizontally to flow down the page vertically

• The responsive-sm, responsive-md, and responsive-lg attributes can be used to change the direction of the columns once a certain width breakpoint is hit