@angular/flex-layout with row and column spacing?

Question

StackBlitz (live demo)

<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="space-around center" fxLayoutGap="10px">
  <mat-card *ngFor="let o of cards">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>{{o.title}}</mat-card-title>
      <mat-card-subtitle>{{o.subtitle}}</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image [src]="o.url" alt="Photo of {{o.title}}">
    <mat-card-content>
      <p>
        {{o.content}}
      </p>
    </mat-card-content>
  </mat-card>
</div>

Where cards is defined on the Component as:

// const url = 'https://material.angular.io/assets/img/examples/shiba2.jpg';
cards: {title: string, subtitle: string, content: string, url: string}[] = [
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
];

However nothing I've tried gives spacing on the rows. I've tried fxFlexOffset, fxLayoutAlign and the various gd prefixed ones.

Solution

I think what you want might be fxLayoutGap, which puts a gap between each flex item. in your example, it would be a horizontal gap.

<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="16px grid">
  <div fxFlex *ngFor="let o of cards">
    <mat-card fxFlex>
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>{{o.title}}</mat-card-title>
        <mat-card-subtitle>{{o.subtitle}}</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image [src]="o.url" alt="Photo of {{o.title}}">
      <mat-card-content>
        <p>
          {{o.content}}
        </p>
      </mat-card-content>
    </mat-card>
  </div>
</div>

If you also want a vertical gap between wrapped rows, I think the grid option of fxLayoutGap should help you.

edit: It sounds like you do need the grid option. I too was confused about this, so I opened an issue on the flex-layout GitHub. It turns out that there are some limitations with how the grid feature works. The gutters between grid rows will not be applied to direct children of the flex container, so we just need to add another div so things can work. I have updated the above code and here is a stackblitz with a working result.

Comments

[A T]

Yeah I tried that, it doesn't work. Open this full screen to see what I mean: angular-wzuwtp.stackblitz.io - you get the gap between columns, but not between rows

[Benjamin Kindle]

Based on the documentation, I think the grid option is what you want, but while researching my answer, I noticed that it doesn't seem to work (It seems to make things worse!). I created an issue because I think it's a problem with flex-layout

[Benjamin Kindle]

See my updated answer based on what I learned from the developer's response to the grid issue