Блог

Новичок в Angular Material, пытаюсь создать страницу с некоторыми карточками с фотографиями, но, похоже, макет по умолчанию для mat-card заключается в том, что они складываются вертикально и не заполняют пространство в строке справа. Я попытался обернуть карточки в div примерно с полудюжиной вариантов гибких макетов, ни один из которых не имел никакого эффекта.

 <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;
}
 

Один из простых способов решить эту проблему — поместить .card-wrapper div вокруг цикла mat-card ‘s *ngFor (чтобы вам не приходилось сражаться со стилем Angular Material по умолчанию) и придать ему некоторый стиль. Я выбрал display: grid вместо flex , потому что это дает больше контроля над представлением ваших данных.

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

grid-template-columns: repeat(2, 1fr); показывает количество элементов (2) в строке и будет повторять строки до тех пор, пока не будут отображены все элементы. gap задает пространство между элементами сетки. Подробнее о столбцах шаблона сетки и пробелах читайте в MDN.

Посмотрите этот простой пример на StackBlitz о том, как содержимое отображается на основе приведенного выше стиля.

Попробуйте это :

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