Angular/flex-layout, how to add vertical space between rows when using fxLayout="row wrap"?

Question

I wrote code like this:

    <div fxLayout="row wrap"
         fxLayoutGap="20px"
         fxLayoutAlign="flex-start">
      <mat-card fxFlex="0 1 calc(33.3% - 20px)"
        class="my-card"
        *ngFor="let item of items">
        ...
      </mat-card>
    </div>

It looks pretty good, only that there is no space between rows. How to add vertical gap between rows using Angular flex-layout and material UI libraries (mat-card here)?

Thanks in advance!

Answer 1

I did not find any out-of-box fx- directives for this. Ended up with this solution, which works, but may not be the most elegant solution. In this css file, simply add:

.my-card {
  ...
  margin-top: 10px;
  margin-bottom: 10px;
  ...
}

Answer 2

Use grid mode: FlexLayout Grid Mode fxLayoutGap="10px grid"