垫-工具栏-行彼此堆叠

Question

我在<mat-toolbar-row>上遇到了问题。我尝试在带有{strong> main-content 类的<mat-toolbar>上使用flexbox和grid。但是它们会不断堆积一点。

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    // SOME CODE
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar class="main-toolbar" color="primary">
      <mat-icon><img src="../../assets/images/x1/outline_navigate_before_black_24dp.png" alt=""></mat-icon>
      <span>R</span>
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon><img src="../../assets/images/x1/round_menu_black_24dp.png" alt=""></mat-icon>
      </button>
    </mat-toolbar>

    <!-- /////////////////////////// -->
    <!--  Home grid -->
    <!-- /////////////////////////// -->
      <mat-toolbar class="main-content">
        <mat-toolbar-row>
          <mat-card>
            <img src="../../assets/images/x1/round_add_black_24dp.png" alt="" mat-card-avatar>
            <mat-card-title>Lorem Ipsum</mat-card-title>
            <mat-card-subtitle>Lorem Ipsum</mat-card-subtitle>
          </mat-card>
        </mat-toolbar-row>
        <mat-toolbar-row>
          <mat-card>
            <img src="../../assets/images/x1/round_add_black_24dp.png" alt="" mat-card-avatar>
            <mat-card-title>Lorem Ipsum</mat-card-title>
            <mat-card-subtitle>Lorem Ipsum</mat-card-subtitle>
          </mat-card>
        </mat-toolbar-row>
        <mat-toolbar-row>
          <mat-card>
            <img src="../../assets/images/x1/round_add_black_24dp.png" alt="" mat-card-avatar>
            <mat-card-title>Lorem Ipsum</mat-card-title>
            <mat-card-subtitle>Lorem Ipsum</mat-card-subtitle>
          </mat-card>
        </mat-toolbar-row>

      </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>

这是这些元素的脚本

.main-content {
padding-top: 64px;
box-sizing: border-box;
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr;

mat-card {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin: 0;
}

如果您仔细看，它会重叠一些像素，只有底部<mat-toolbar-row>具有完整的高度。 mobile view desktop view

致谢。