0
347
ViewsHow to make 5 cards on each line?
Can someone help me please?
I'm writing in Angular and I want to display for example 5 cards on each row. Now I have horizontal scroll, and it looks like that:
Code:
<div class="content">
<div fxLayout="row wrap" fxLayout.xs="column" style="width: 35%; ">
<!-- Single "Responsive" Card-->
<div fxFlex [style.margin]="'20px'" style="display: flex;">
<mat-card *ngFor="let release of releases" [style.min-width]="'200px'">
<mat-card-header>
<mat-card-title>{{release.name}}</mat-card-title>
<mat-card-subtitle>New Release</mat-card-subtitle>
</mat-card-header>
<a href='/album'><img mat-card-image class="album-cover" src={{release.images[0].url}} alt="album art"></a>
<strong>Release Date: </strong>{{release.release_date}}<br />
<strong>Tracks: </strong>{{release.total_tracks}}<br /><br />
<a style="text-decoration:none" href="/artist">
<mat-card-content *ngFor="let rel of release.artists">
<mat-chip-list aria-label="Artist selection">
<mat-chip>{{rel.name}}</mat-chip>
</mat-chip-list>
</mat-card-content>
</a>
</mat-card>
</div>
How can I display 5 cards on each row for example? Thank you in advance.
3 answers
Answer question0
Solution lies in using the right styles. If you are looking to have few cards on each row, you might have to use max-width on the container containing the cards.
0
it because you wrap all with style: flex . to fix this you can add this style for child element in this case it mat-card
style = flex: 20%;
0
Your styles are a bit messy...
First: I recommend separating styling from html, use css files
Second: cards doesnt get wrapped because you specify fxLayout="row wrap" on mat-card's grandparent, but it cannot wrap anything because it only has one child, if you want to use flexbox then flex-flow: row wrap; must be declared on mat-card's direct parent div, and plus mat-card must have max-width: 20%.
But i would use grid, just remove every styling from html and add display: grid; grid-template-columns: repeat (5, 1fr); to the div that contains mat-cards
this will automatically devide each row in 5 containers of equal width and wrap the other ones to next row, you dont need to add anything else.
If you want it to be mobile frindly, you just add media query and change repeat(5,1fr) to repeat(1fr) and it will show one card in each row, when reproduced in mobile