Angular Material Cards don't fill entire row

1
votes

New to Angular Material, trying to make a page with some cards that have photos but it seems the default layout for mat-card is that they stack vertically and don't fill out the space in the row to the right. I've tried wrapping the cards in a div with about a half dozen varieties of flex layouts, none of which have had any effect.

<mat-card
  *ngFor="let photo of photos_brazil">
  <mat-card-header>
    <mat-card-title>{{photo.title}}</mat-card-title>
    <mat-card-subtitle>{{photo.subTitle}}</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="{{photo.img_source_small}}" alt="{{photo.alt}}">
  <mat-card-content>
    <p>{{photo.content}}</p>
  </mat-card-content>
</mat-card>


mat-card {
  max-width: 410px;
  margin: 1rem;
}

enter image description here

2
angularangular-material

2 Answers

1
votes

One easy way to solve this is to put a .card-wrapper div around the mat-card's *ngFor loop (so you don't have to battle with Angular Material's default styling) and give that some styling. I chose for display: grid instead of flex because it gives more control how to present your data.

.card-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

grid-template-columns: repeat(2, 1fr); is showing the amount of items (2) per row and it will repeat the rows until all items are displayed. gap is setting the space between the grid items. Read more about grid-template columns and gap at MDN.

See this simple example on StackBlitz on how the content is displayed based on above styling.

0
votes

Try this :

mat-card {
  width: calc(100% - 70px);
  height: calc(100% - 70px);
}