ion-grid with alternate columns

Issue

I'm not very familiar with Angular. I would like to have a grid like this:

i.e. have one image per row alternating with two images.I tried with this code but I get a slightly different grid (I also get the same image twice because I don't know how to increase the index inside 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%;
}

How could I modify it ?

Solution

You need to wrap rows in ion-row element and everything in the ion-grid, then you can use ion-col for each column. Here is the simple example of full-width element and 2-column row: https://stackblitz.com/edit/ionic-yxpfht?file=pages%2Fhome%2Fhome.ts

You may also refer to the official docs since there is a nice example as well of how to use grid. Additionally, you may want to manipulate spacing/gutter, which is explained in the docs.

And if you have your images in array, like this `['img1', 'img2', 'img3'] you may want to check if you have 3 to display them 2 + 1 (2 in the first row and 1 in the second), so then you can just use something like on the stackblitz example.

Answered By - akkonrad