[docs] fxLayoutGap not usable in combination with wrap and breakpoints

Bug, feature request, or proposal:

It would be nice if fxLayoutGap could be improved (or an alternative could be made) to make it work in combination with flexLayout=“row wrap” without custom CSS.

What is the expected behavior?

Each line fill the complete width.

What is the current behavior?

The layout gap at the end of the line is not accounted for. Each diff except the last one has an offset on the right.

What are the steps to reproduce?

Providing a StackBlitz (or similar) is the best way to get the team to see your issue.

https://stackblitz.com/edit/flexlayoutgap-breakpoints

What is the use-case or motivation for changing an existing behavior?

I know about the fxFlex=“calc(100% - gap px)” workaround but writing this for each element and each breakpoint is a lot of work.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.x @angular/flex-layout 6.0.0-beta.15

Is there anything else we should know?

I used the following scss as an alternative to fxLayoutGap:

$md-layout-gap: 24px;

[fxLayout].md-layout-gap {
    margin-right: (-$md-layout-gap) !important;

    [fxFlex] {
        margin-right: $md-layout-gap !important;
    }
}

I am sure this can be done a lot nicer if this was implemented in flexLayout (no !important, layoutGap as a property)

[CaerusKaru]

Did you try using fxLayoutGap in grid mode?

E.g. fxLayoutGap=“10px grid”

[ghost]

Please add the “grid-mode” behavior to the documentation since it’s an essential feature! Thx 😃