Remove padding from fxLayoutGap last element of row

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>

The problem (in red) :

EDIT :

I used Abdul Rafay's solution but here a new problem :

1 Answer
1

Edit: try assigning classes to your elements through ngFor here:

ngFor

<div fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid" style="margin-right:-20px;">
<div fxFlex="calc(25%-20px)" fxFlex.md="33"
*ngFor="let product of products;let i = index"
[ngClass]="'product-'+getClassName(i)">
...


.ts:

counter: number = 0;

getClassName(index)
if(index%4 === 0)
this.counter = 0;
this.counter++;
switch(this.counter)
case 1:
return "first"
case 2:
return "second"
case 3:
return "third"
default:
return "fourth"




then add these css styles:

css

.product-first[fxFlex]
padding-right: 20px !important;

.product-second[fxFlex]
padding-left: 6.66px !important;
padding-right: 13.34px !important;

.product-third[fxFlex]
padding-left: 13.34px !important;
padding-right: 6.66px !important;

.product-fourth[fxFlex]
padding-left: 20px !important;
padding-right: 0 !important;



I'm not sure if it's the best way but it works.

Old ans: Simply add a css styles:

css

[fxFlex]:last-of-type padding-right:0px !important;


If there's more than one row:

[fxFlex]:nth-child(4n) padding-right:0px !important;


If there's more fxFlex elements, you can assign a class:

<div fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid" style="margin-right:-20px;">
<div class="padding-fix" fxHide.lt-sm="true" fxFlex="calc(25%-20px)" fxFlex.md="33">
...

.padding-fix[fxFlex]:nth-child(4n) padding-right:0px !important;


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.