As someone who is not very familiar with Angular, I am trying to create a grid layout like the one shown here:
https://i.stack.imgur.com/nBavk.png
The desired layout includes alternating rows with one image followed by two images. My current attempt at achieving this has resulted in a slightly different grid, where the same image is repeated due to my inability to increment the index properly within the loop:
.html:
<ion-content>
<ion-grid class="design">
<ion-row size="12" *ngFor="let t of types ; let i=index">
<ion-col *ngIf="i%3==0" size="12">
<img oncontextmenu="return false;" src={{t?.img}} class="center" />
</ion-col>
<ion-col *ngIf="i%3!=0" size="6">
<img oncontextmenu="return false;" src={{t?.img}} class="center" />
</ion-col>
<ion-col *ngIf="i%3!=0" size="6">
<img oncontextmenu="return false;" src={{types[i+1]?.img}} class="center"/>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
.scss:
.design {
position: center;
width: 90%;
height: 90%;
margin-left: auto;
margin-right: auto;
}
.center {
display: block;
width: 100%;
}
https://i.stack.imgur.com/skjlm.png
Any suggestions on how I could modify it to achieve the desired grid layout?