具有Angular Material卡宽度的CSS网格变得大于手机上的屏幕尺寸

Question

我将Css网格与Angular Material一起使用

我要每行对齐两张卡。

容器组件

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

这里是demo（在Iphone 5 / 5s上重现行为放置响应模式）

缩小时，我的工具栏无法容纳所有屏幕（可能卡片过大）