Grid question

In the HTML:

<ion-toolbar><ion-title>Grid</ion-title></ion-toolbar>

<ion-content class="grid-full">

  <ion-row>
    <ion-col class="cell-1">
      statistics
    </ion-col>
    <ion-col class="cell-2">
      profile
    </ion-col>
    <ion-col class="cell-3">
      photos
    </ion-col>
    <ion-col class="cell-4">
      laboratory
    </ion-col>
    <ion-col class="cell-5">
      calendar
    </ion-col>
    <ion-col class="cell-6">
      alert
    </ion-col>
  </ion-row>

</ion-content>

In the CSS:

.grid-full ion-row {
  height: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.grid-full ion-col {
  flex: 0 0 50%;
  max-width: 50%;
  text-align: center;
  padding: 10px 5px;
}

.cell-1 {
  background-color: #C5DCFC;
}
.cell-2 {
  background-color: #262B69;
}
.cell-3 {
  background-color: #A0C5FA;
}
.cell-4 {
  background-color: #B3D0FC;
}
.cell-5 {
  background-color: #73A7F9;
}
.cell-6 {
  background-color: #8CB9FA;
}

Note: you could also add width-50 as an attribute to each ion-col but I just did it in the CSS because it applies to all of them. We could always add some attributes to make this easier.

You'll have to tweak the CSS to add the images and center them vertically, but this is a good starting point.

Screen Shot 2016-01-23 at 2.21.24 PM.png375x626 10.6 KB