我在使用CSS网格的Angular 15组件中。当网格只有一行时，网格底部与“服务部分”底部相同。当我有多个行时，网格会延伸到“services-section”的底部之外。另外，每增加一行，底部的扩展就会增加一点。
将overflow设置为auto会将滚动条添加到div中。将overflow设置为hidden，将截断最后一行。这两者都不是期望的。高度，最小高度100%，自动等也不行。
如何让网格容器正常工作？https://jsfiddle.net/eflat123/vq08u7gb/7/

<div class="grid" style="min-height: fit-content;">
    <mat-card class="card">
      <mat-card-content><p>My Service 1</p><p>1 hour</p></mat-card-content>
    </mat-card>
    <mat-card class="card">
      <mat-card-content><p>My Service 2</p><p>1 hour</p></mat-card-content>
    </mat-card>
    <mat-card class="card">
      <mat-card-content><p>My Service 3</p><p>1 hour</p></mat-card-content>
    </mat-card>
    <mat-card class="card">
      <mat-card-content><p>My Service 4</p><p>1 hour</p></mat-card-content>
    </mat-card>
    <mat-card class="card">
      <mat-card-content><p>My Service 5</p><p>1 hour</p></mat-card-content>
    </mat-card>
    <mat-card class="card">
      <mat-card-content><p>My Service 6</p><p>1 hour</p></mat-card-content>
    </mat-card>
    <mat-card class="card">
      <mat-card-content><p>My Service 7</p><p>1 hour</p></mat-card-content>
    </mat-card>
  </div>
</div>

<style>
  .services-section {
    border: 1px solid blue;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 1.5em;
    grid-row-gap: 7%;
    grid-column-gap: 5%;
  }
</style>

字符串