I currently have a grid of products, 2 per row like this:
products = [ [item 1, item 2], [item 3, item 4] ..... ]
<ion-grid>
<ion-row *ngFor="let row of products">
<ion-col width-50 *ngFor="let product of row">
<ion-card (click)="showProd(product.id)">
<img class="card-img" [src]="product.image">
<div class="card-title">{{product.name}}</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
The result is:
Item 1 | Item 2
Item 3 | Item 4
.
.
.
.
I would like each item to expand to fill the row if you click on it, and shift the rest of the grid out of the way, like this (click on item 3):
Item 1 | Item 2
................
.....Item 3.....
................
Item 4 | Item 5
.
.
.
.
Does anyone know how I might achieve this? Do I need a different approach that doesn’t use Ionic rows and columns?
Cheers!