angular - Remove padding from fxLayoutGap last element of row

Question

I have a problem using fxLayoutGap. The last column of my list has a padding and I don't want it.

How to keep fxLayoutGap (space between cards) and remove the padding from the last column ? Thank !

<div fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid" style="margin-right:-20px;">
  <div fxHide.lt-sm="true" fxFlex="calc(25%-20px)" fxFlex.md="33">
    <div fxFlexFill fxLayoutAlign="center center">
      <mat-card (click)="addAdvert()" class="mat-card-add-button">
        <div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%">
          <span style="font-size:32px;text-align:center">+<br />test</span>
        </div>
      </mat-card>
    </div>
  </div>
  <div fxFlex="calc(25%-20px)" fxFlex.md="33" *ngFor="let product of products | slice:0:3">
    <div style="border:1px solid #ccc" fxFlexFill fxLayoutAlign="center stretch">
      <mat-card class="ad">
        <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
        <mat-card-title>test</mat-card-title>
        <mat-card-content>
          <p>test</p>
        </mat-card-content>
        <mat-divider [inset]="true"></mat-divider>
        <mat-card-actions align="end">
          <button mat-icon-button matTooltip="edit" matTooltipShowDelay="800">
            <mat-icon>mode_edit</mat-icon>
          </button>
          <button mat-icon-button matTooltip="delete" matTooltipShowDelay="800">
            <mat-icon>delete</mat-icon>
          </button>
        </mat-card-actions>
      </mat-card>
    </div>
  </div>
</div>

Answer 1

Just do this small trick.

Remove fxLayoutGap and add a margin to the child element and add the minus value of that same margin to the parent element.

<div fxLayout="row wrap" style="margin-right: -16px;">
    <div fxFlex="calc(50% - 16px)" style="margin-right: 16px;">

    </div>
    <div fxFlex="calc(50% - 16px)" style="margin-right: 16px;">

    </div>
</div>