Angular Tile Layout (Gaps using Flex)

Question

I have been plying with Flex and i am almost able to get the desired result of a nice feed of tiles. But i would assume that each column would allow the tiles to stack continuously (without rows). Perhaps im taking the wrong approach all together.. and ideas or help would be much appreciated.

<div fxLayout="row wrap" fxLayout="none start">
  <div
    *ngFor="let topic of topics"
    fxFlex="33"
    fxFlex.md="33"
    fxFlex.sm="50"
    fxFlex.xs="100"
    fxLayout="column"
    style="padding: 5px;">

    <mat-card>
      <mat-card-header>
        <mat-card-title class="card-title" routerLink="/topic/{{topic._id}}/comments">{{topic.title}}</mat-card-title>

        <mat-card-subtitle>
          {{topic.createdBy.name}} • {{topic.createdAt|date:'short'}}
        </mat-card-subtitle>
      </mat-card-header>

      <mat-card-content class="card-content">
        <p>
          {{topic.description}}
        </p>
      </mat-card-content>

      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>FOLLOW</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

Also i get a similar result without using flex but aligned on the bottom

<div style="width: 100%;">
  <div
    *ngFor="let topic of topics"

    style="width: 32% !important; padding: 5px; display: inline-block">

You can use align-items: stretch in flex. Take a look at this page, the whole positioning in flex is great -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Grzegorz T., Jul 08 '19 at 12:44
you can give a try to column CSS : https://developer.mozilla.org/en-US/docs/Web/CSS/columns / https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts , else the well known https://masonry.desandro.com/ *Flex requires a fixed height to wrap to next column, grid requires spanning element through rows while you know which ones. — G-Cyrillus, Jul 08 '19 at 13:02

Angular Tile Layout (Gaps using Flex)

0 Answers0