How to make responsive grid in ionic Angular and ngfor?

Question

How to make responsive grid in ionic Angular and ngfor? just like here Enter image description here

My grid template:

<ion-grid>
  <ion-row>
    <ion-col>
        <ion-item *ngFor="let prod of displayedList" class="item-entry" detail routerLink="/tabs/tab1/prod-detail/{{ prod.id }}">
          <ion-thumbnail>
            <ion-img [src]="prod.images[0].src" alt="{{ prod.name }}"></ion-img>
          </ion-thumbnail>
          <ion-label>
            <h3 class="item-name">{{ prod.name }}</h3>
            <ion-text>
              <p class="price">{{ prod.price | currency:"GBP" }}</p>
            </ion-text>
          </ion-label>
        </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

I try to suggest this grid but I don't know how to show it in ngFor loop.

<ion-grid>
  <ion-row>
    <ion-col>1</ion-col>
    <ion-col>2</ion-col>
    <ion-col>3</ion-col>
  </ion-row>
</ion-grid>

Answer 1

You can try adding size to ion-col and put *ngFor into ion-col itself. An example could be:

<ion-col sizeXs="4" *ngFor="let element of elements">
   <ion-item>...</ion-item>
</ion-col>

As you can see, I used size 4 so that 3 columns would fit within 1 row (maximum of 12 columns, so 12/4 = 3). hope it helps you!