Question: I have a problem counting up the ngFor Loop in Angular 2. Im trying to develop a grid that has 3 columns and a dynamic amount of rows. I would like to loop through my array and add the elements from left to right and every three elements it should jump to the next row. Im using Ionic Framework 2.0.

My code looks like this:

```
   <ion-row *ngFor="#m of movies; #i = index"  (click)="movieTapped(m)">
        <ion-col width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
                {{m.Title}} <br>
                Rating:     {{m.imdbRating}}<br>
                Rated:      {{m.Rated}}<br>
                Released:   {{m.Year}}<br>
            </div>
        </ion-col>
        <ion-col  width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
            </div>
         </ion-col>
         <ion-col width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
            </div>
         </ion-col>
  </ion-row>

```

Hope you can help me out.

Cheers!

Answer: 
You don't have to do any change in the data! Ionic 2 already providing the support for it.

We can use the `wrap` in `<ion-row>`. Example: `<ion-row wrap>`

[Source](http://ionicframework.com/docs/v2/components/#grid)

> 
> Use the wrap attribute on an `<ion-row>` element to allow items in that
>  row to wrap. This applies the `flex-wrap: wrap;` style to the `<ion-row>`
>  element.
> 
> 
>
I would modify the data to represent the structure you want to render (rows of 3 columns) and then render the view according to the data.

```
<ion-row *ngFor="let r of rows; let i = index"  (click)="movieTapped(m)">
    <ion-col width-33 *ngFor="let m of r; let j = index">
        <div class="row responsive-md">
            <img [src]="m.Poster" width="100%" />
            {{m.Title}} <br>
            Rating:     {{m.imdbRating}}<br>
            Rated:      {{m.Rated}}<br>
            Released:   {{m.Year}}<br>
        </div>
    </ion-col>
</ion-row>

```