Padding problem at last element in every row when using fxLayoutGap and grid layout

Bug Report

I’m currently facing a big issue in the library. The problem is the fxLayoutGap setting for grid likely designs but just as a flexbox.

For example when I use this settings fxLayout="row wrap" fxLayoutGap="25px grid" fxFlexFill on each box/grid element to add a gap between each boxes, I’m also getting a gap at the last element of each row. In my eyes there should be no gap to prevent a useless padding there:

I did a lot of research. The most nearest answer on SO is this one:

Remove padding from fxLayoutGap last element of row

But this answer is just about the las element in a single row so the answer don’t helps. So I’ve continued searching and found this issue from the past:

https://github.com/angular/flex-layout/issues/363

This is an issue in the actual library. But sadly you said that this is not a bug and should be fixed by the developer. But I think this is not true…

You’ve provided this answer here…

Simply add a CSS style [fxFlex]:last-of-type { margin-right:15px; }

… and closed the ticket: Closing as a will-not-fix issue. So not very helpful. After trying your answer this way for padding [fxFlex]::nth-child(4n) { padding-right:0px !important; } I’ve found out the the last element get’s bigger which looks bad because the padding is not a margin which would not affect the size:

This is my code of the element:

<div id="list" class="shadow-box-list" fxLayout="row wrap" fxLayoutGap="25px grid" fxFlexFill>
  <div class="widget" *ngFor="let element of elements" [fxFlex]="fxFlex">
    <div class="shadow-box-list-widget-content mat-elevation-z3" fxLayout="row" fxLayoutAlign="center center">
      <div class="name">{{element.name}}</div>
    </div>
  </div>
</div>

What is the expected behavior?

I’m expecting that the last element has no padding at the right side and that the width get’s calculated correctly so that the last element is not bigger than the other ones because the padding is missing.

What is the current behavior?

There is too much space at the right side of the last element of a row.

What are the steps to reproduce?

Create a layout like showed above.

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

The motivation is a good looking website.

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

Every version I saw so far.

Is there anything else we should know?

No

[vovopap]

Having the same problem here.

Wrapping the whole thing inside a div with overflow: hidden worked for my case.

[aallnneess]

Same problem here, using fxLayoutGap inside a grid creates an ugly scroll bar:

<div class="images-container">
  <div
    fxLayout="row wrap"
    fxLayout.lt-sm="column"
    fxLayoutGap="20px grid"
    fxLayoutAlign="center space-between">
    <ng-container *ngFor="let card of cards">
      <app-image-card
        fxFlex="0 1 calc(33.3% - 32px)"
        fxFlex.lt-md="0 1 calc(50% - 32px)"
        fxFlex.lt-sm="100%"
      ></app-image-card>
    </ng-container>
  </div>

</div>

Wrapping the whole thing inside a div with overflow: hidden worked for my case. but this works