Issue
I am trying to get the elements generated by *NgFor to be sorted into 3 elements per row.
Currently this code puts all the content of "cont" in a single row.
<div fxLayout="row">
<mat-card *ngFor="let item of cont">
<p>{{item.title}}</p>
</mat-card>
</div>
but I would like to have something like:
item.title1 item.title2 item.title3
item.title4 item.title5 item.title6
Solution
Not sure if it would be of any help as I see you are asking with flex layout, but what if you use display grid to achieve that.
You would have something like:
<div class="grid">
<mat-card *ngFor="let item of cont">
<p>{{item.title}}</p>
</mat-card>
</div>
And in your css you can have
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
That way you will always have 3 elements per row
Answered By - Fernando Morales
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.