Ionic - How to turn an ion-list into a grid

I have an ion-list of clickable items that I want to turn into a grid of square items (boxes) and I don't know how. Please help.

Here is my list:

<ion-view>

  <ion-content>
     <ion-list >
      <ion-item ng-repeat="letter in letters" href="#/letters/{{letter.number}}" class="letters-list">
        {{letter.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Please how to turn this into square item boxes?

Add classes with respect to the device size. class="col col-50" used to show every item size will be 50% of the total width. for more info http://ionicframework.com/docs/components/#grid

<ion-view>

  <ion-content>
     <ion-list class="row">
      <ion-item class="col col-50" ng-repeat="letter in letters" href="#/letters/{{letter.number}}" class="letters-list">
        {{letter.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

If you are unable to do it with ion tags, try to do it with div tags.

  <ion-content>
     <div class="row">
      <div class="col col-50" ng-repeat="letter in letters" href="#/letters/{{letter.number}}" class="letters-list">
        {{letter.title}}
      </div>
    </div>
  </ion-content>
</ion-view>

on of them must work. Of course both.