How do I get a Staggered Card layout in Ionic App

@chilupa wrote:

I’m using Ionic 4.

Figuring out a way to achieve Pinterest like layout, in other words, a staggered card layout in Ionic app.

What I currently see in the output is below. How do I make that empty space filled with the card that is there below it.

24%20PM556×990 116 KB

Code

  <ion-grid>
    <ion-row class="ion-align-items-start">
      <ion-col size="6" *ngFor="let post of posts">

        <div class="card">
          <div layout="row" layout-align="start center">
            <img class="user-image" src="">
            <span class="user-and-date">
              <div class="user-name">
                {{post.postedby}}
              </div>
              <div class="post-date-time">
                {{post.postdatetime}}
              </div>
            </span>
            <b>{{post.posttitle}}</b>
            <p>{{post.postcontent.substring(0,150)}}</p>
          </div>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>

I’m looking for something like this. Could anyone please guide.

Screenshot_20191109-155213720×1491 353 KB

Posts: 1

Participants: 1

Read full topic