Сетка Css с шириной карты Angular Material становится больше, чем размер экрана на мобильном - PullRequest
Новая
       22

Сетка Css с шириной карты Angular Material становится больше, чем размер экрана на мобильном

0 голосов
/ 14 мая 2019

Я использую сетку Css с угловым материалом

Я выравниваю две карты в ряду.

Контейнерный компонент 

<div class="padding">
  <div class="wrapper">
    <div  *ngFor ="let character of characters?.charactersTab; let index = index" class="card">
      <app-character-card [character]="character"></app-character-card>
    </div>
  </div>
</div>

CSS 

.wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
}
.padding {
    padding:10px;
}

Компонент карты 

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>{{character.name}}</mat-card-title>
  </mat-card-header>
  <img mat-card-image [src]="character.imageUrl" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
    </p>
  </mat-card-content>
</mat-card>

Вот демоверсия (чтобы воспроизвести поведение, установите режим ответа на Iphone 5 / 5s)

cards cut off

При уменьшении масштаба панель инструментов не умещается на весь экран (возможно, карты слишком велики)

toolbar width limited

...