Angular flex-layout - fxLayoutGap causes annoying gap at end of wrapped rows

Question

Using fxLayoutGap and wrap leaves an annoying margin at the end of each row that is wrapped.

Is there a way to fix this?

https://stackblitz.com/edit/angular-fxlayoutgap-calc-mralnz?file=app%2Fapp.component.html

<div fxLayout="row wrap" fxLayoutGap="25px">
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
</div>

I am using:

• @angular/[email protected]
• @angular/[email protected]
• @angular/[email protected]

Answer 1

For anyone looking for the answer to this problem, you need to add grid to fxLayoutGap. The documentation at https://github.com/angular/flex-layout/wiki/fxLayoutGap-API states:

To use fxLayoutGap with a gutter system, simply append the suffix grid to any fxLayoutGap value. This creates a gutter system by applying a margin to the host element and an inverse padding to each child. Other than this change, it works exactly as the default mode. It also takes flex-order and hidden elements into account, and has the same responsive abilities as the default mode.

Please note that unlike the standard gap functionality, fxLayoutGap with the grid keyword applies a padding to each child element to add the gutter, in addition to the margin on the host element.

That last point is in relation to how the grid on the child elements can clash with the fxLayoutGap on the parent element so be aware that the parent may override the child layout. Adding an extra div between the two will solve that issue.

Answer 2

You could hack it by adding a dummy component at the end which isn't displayed but gets laid out by flex-layout so that the "last" form field is also given the extra margin, and then adjusting the parent container margins to offset the additional right margin:

<div fxLayout="row wrap" fxLayoutGap="25px" style="margin-right:-25px;">
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <span class="cdk-visually-hidden"></span>
</div>

But I think this is something that should be fixed in flex-layout.