[SOLVED] List with two elements on odd rows and one item on even rows

Ionic Framework ionic-v3
1

I want to achieve an infinite list where I would display two elements on odd rows and one element on even row. Furthermore elements should kind of overflow to give the feeling of saved spaces. See my attached crappy mockup for a better idea of what I mean.

If someone already did this I would love to at least have some inputs about how to solve it?
If no one did this already, maybe don’t you mind sharing some ideas?

No sure yet how to begin this…I was thinking something like

<ion-list>
   <ion-item *ngFor="....." [class.odd-item-1]="rows is odd and item count is odd" [class.odd-item-2]="rows is odd and item count is even"  [class.even-item]="rows is even">
   </ion-item>
 </ion-list>

and then a lot of css and fun with flex-grid…but maybe that’s not the easiest pass to follow?

image
Capture d’écran 2017-07-12 à 13.06.21.png766×1512 130 KB

2

Solved it like following

html:

<ion-card *ngFor="let item of items; let i=index;" no-shadow text-center [class.line-odd]="i == 0 || ((i+1) % 3 != 0)" [class.line-even]="i > 0 && ((i+1) % 3 == 0)">
    <div class="content-line">
       <!-- My stuffs -->
   </div>

and in scss:

ion-card {
        position: relative;

        &.line-odd {
            display: inline-block;
            width: calc(50% - 24px);

            div {
                display: flex;
                align-items: center;
                flex-direction: column;
            }
        }

        &.line-even {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 70px;
            overflow: visible;

            div.content-line {
                position: absolute;
                top: -30px;
            }
        }
    }