Display array of items in a 3x3 table like display

I have an array of items I would like to display in a 3x3 table as follows:

enter image description here

In order to achieve that, I sliced my array into 3 arrays of 3 and displayed it as follows:

<ion-grid no-padding class="home-gallery">
    <ion-row *ngFor="let row of items | async">
        <ion-col *ngFor="let item of row">
            <div class="products_list">
                <div class="products_list_img">
                    <img [src]="item.previewImage" (click)="showItem($event, item)"/>
                </div>    
            </div>
        </ion-col>
    </ion-row>
</ion-grid>

Is there a way to achieve this display while keeping my array flattened?

Sure. Have only a single <ion-row> and give each <ion-col> a width attribute (in your case, col-4), and they will wrap at 12.

1 Like

That di the trick! thanks