Arranging items in rows and columns in ionic2

Question

I need to arrange buttons in a matrix format as shown here . I am trying to get reproduce this in an app ionic2 mobile app.
This is my attempt to convert it to angular2 *ngFor and *ngIf.

 <div *ngFor="tag in item.tags;let tagIndex = index">
        <div class="row" *ngIf="index % 3 == 0">
          <div *ngFor="i in [0,1,2]">
            <div *ngIf="(tagIndex + i)<item.tags.length"
                <button style="margin:5px">{{item.tags[tagIndex+i]}}</button>
            </div>
          </div>
        </div>  
  </div> 

I did not even show the buttons. I tried using <ion-row> and <ion-col> tags of ionic2. It worked. But, the buttons are not uniformly placed as shown below.

The code to display using <ion-row> is this...

<ion-row id="footer">
    <ion-col style="margin:5px 5px 5px 5px" *ngFor="let tag of item.tags">
        <button [innerHtml]="tag" (click)="tagClicked($event, tag)"></button>
    </ion-col>
</ion-row>   

css

#footer {
    float:left;
    clear: both;
    text-align: center;
    padding: 5px;        
    flex-wrap:wrap;
    display:flex;
}

If using <ion-row> is the better approach since the framework takes care of displaying all the tags in a gridlayout, how should I make them arrange with uniform distance ?

Answer 1

I got it working now. I had few syntax errors in my earlier code. For eg.,

 <div *ngFor="tag in item.tags;let tagIndex = index"> .   

Instead of of I put in. Now with the code fixed, I am able to get the buttons uniformly displayed. This is the final code.

<div  *ngFor="let tag of item.tags;let tagIndex = index">
         <div id="footer" *ngIf="tagIndex % 3 == 0">
              <div *ngFor="let i of [0,1,2]">
                <button class="col" style="margin:5px" *ngIf="(tagIndex + i) < item.tags.length" class="col" style="margin:5px">{{item.tags[tagIndex +i]}}</button>
                </div>
         </div>
  </div>      

The css remains the same.