Using the Grid System in Ionic 2

Ionic comes with a built-in grid component system that allows you to create just about any kind of layout for your apps. Behind the scenes the grid system uses Flexbox to layout the items, so everything behaves as you would expect with creating a layout with flex containers and flex items.

To use the grid system in your templates, you simply define a parent ion-grid element and then rows within that element with ion-row and then finally columns within each row with ion-col:

<ion-content padding>
  <ion-grid>
    <ion-row text-center>
      <ion-col>I'm a column</ion-col>
      <ion-col>Another column</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

You’ll notice that by default the columns are of equal width. You can change that behavior by using width attributes on the ion-col elements. The available attributes are: width-10, width-20, width-25, width-33, width-50, width-67, width-75, width-80, width-90.

Here’s an example with three rows that each have columns with width attributes specified:

<ion-content padding>
  <ion-grid text-center>
    <ion-row>
      <ion-col width-67>I'm a column</ion-col>
      <ion-col width-33>Another column</ion-col>
    </ion-row>

    <ion-row>
      <ion-col width-25>A</ion-col>
      <ion-col width-25>B</ion-col>
      <ion-col width-50>C</ion-col>
    </ion-row>

    <ion-row>
      <ion-col width-33>Lone Column</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

You can also use the wrap attribute on a row for the columns to wrap if they don’t fit into one row:

<ion-content padding>
  <ion-grid text-center>
    <ion-row wrap>
      <ion-col width-25>Too</ion-col>
      <ion-col width-25>Many</ion-col>
      <ion-col width-25>Columns</ion-col>
      <ion-col width-25>For</ion-col>
      <ion-col width-25>One</ion-col>
      <ion-col width-25>Row</ion-col>
      <ion-col width-25>Not</ion-col>
      <ion-col width-25>A</ion-col>
      <ion-col width-25>Problem!</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Finally, use offset attributes on columns to change their placement within a row:

<ion-content padding>
  <ion-grid text-center>
    <ion-row>
      <ion-col width-25>One</ion-col>
      <ion-col width-25 offset-50>Two</ion-col>
    </ion-row>

    <ion-row>
      <ion-col width-50 offset-25>Three</ion-col>
    </ion-row>

    <ion-row>
      <ion-col width-20>Train</ion-col>
      <ion-col width-20 offset-20>With</ion-col>
      <ion-col width-20 offset-20>Me!</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>