How to display 3 <ion-card> per row that contains image and increment number by *ngFor

user_6152553 0
Viewed 4410

I'm trying to design Ionic 2 HTML page that display 3 <ion-card> per row that contains fixed image size and increment number by using *ngFor such as shown in the picture.

3 <code><ion-card></code> per row

My HTML code you may need it

<ion-row>
  <ion-col *ngFor="let l of list1 | async">
    <ion-card (press)="delete(l.$key)">
      <img src="{{l.url}}"/>
    </ion-card>
  </ion-col>
</ion-row>
ionic2 html
2 Answers

You just need to add col-4 in your

this is the code:

<ion-row>
  <ion-col col-4 *ngFor="let l of list1 | async">
    <ion-card (press)="delete(l.$key)">
      <img src="{{l.url}}"/>
    </ion-card>
  </ion-col>
</ion-row>
user_100676000
Related