Same size of the last items with Flex Layout in the grid system

Question

I have a problem using the flex layout grid system.

Let's say I have a grid of 6 items and I want 4 items per rows. So I would do like this :

<div fxFlex="100" fxLayout="row wrap" fxLayoutGap="1px">
<div fxFlex="calc(25% - 1px)" fxLayoutAlign="center end" *ngFor="let item of items">
    <span fxFlex>{{ item }}</span>
</div>
</div>

The problem with this code is that the last two items on the second row have a different size than the items on the first row. They would have a size of 50% of the full size row but the item of the first row would be 25% of the full size row.

So how would I do to have all items with 25% of the full size row on two rows?

Answer 1

The answer is using fxFlex="25" instead of fxFlex="calc(25% - 1px)" and removing fxLayoutGap and solve this by adding padding: 1px for example.

I have create a stackblitz to show this possible solution (width padding: 3px):

<div fxFlex="100" fxLayout="row wrap">
    <div fxFlex="25" fxLayoutAlign="center end" *ngFor="let item of items" style="padding: 3px;">
        <span fxFlex>{{ item }}</span>
    </div>
</div>

If you do not want to remove fxLayoutGap use fxFlex="24" instead.

<div fxFlex="100" fxLayout="row wrap" fxLayoutGap="1px">
    <div fxFlex="24" fxLayoutAlign="center end" *ngFor="let item of items">
        <span fxFlex>{{ item }}</span>
    </div>
</div>