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>
See Question&Answers more detail:os