Member Avatar for SimonIoa

Hello i am using Ionic 3 and Angular 5. Does anyone has an example for displaying items in different ion-cols (col-6, col-8,col-12)? Pinterest wise?

  • 3 Contributors
  • 2 Replies
  • 2K Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by Antionne

Dani AI

Generated

Good question, . In Ionic 3 the grid is 12 columns wide. You can mix widths like col-6, col-8, and col-12, but keep in mind the grid lays items row-by-row. That gives you different widths, not a true Pinterest waterfall. For the waterfall look you need a masonry layout (see option 2).

Option 1: different widths with ion-grid

<ion-grid>
  <ion-row>
    <ion-col *ngFor="let card of cards; let i = index"
             [ngClass]="colClass(i)">
      <app-card [data]="card"></app-card>
    </ion-col>
  </ion-row>
</ion-grid>
// Example: cycle 12/8/6 just to show varying widths
colClass(i: number): string {
  const m = i % 3;
  if (m === 0) { return 'col-12'; }   // full
  if (m === 1) { return 'col-8'; }    // ~67%
  return 'col-6';                     // 50%
}

Notes:

  • Rows wrap automatically when a row exceeds 12 columns.
  • This will not auto-pack shorter cards under taller ones; gaps can appear.

Option 2: Pinterest-style masonry (CSS-only)

<div class="masonry">
  <div class="masonry-item" *ngFor="let card of cards; trackBy: trackById">
    <app-card [data]="card"></app-card>
  </div>
</div>
.masonry { column-count: 2; column-gap: 8px; }
@media (min-width: 768px) { .masonry { column-count: 3; } }
.masonry-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 8px;
}

Tips:

  • Ensure images are width:100% to prevent column overflow.
  • Use trackById in *ngFor for smoother scrolling and fewer reflows.
  • If you need drag/reorder or precise packing, use a masonry library after images load.

this should help even without the OP’s sample code.

Member Avatar for Anninflow

Can you show your examples first?

Member Avatar for Antionne

Share the code please, will you?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.