为什么 CSS 网格会延伸到父级之外？

Question

我在使用 CSS 网格的 Angular 15 组件中。当网格只有一行时，网格底部与“服务部分”底部相同。当我有多于一行时，网格会延伸到“服务部分”的底部之外。另外，每一行，底部延伸都会增加一点。

将溢出设置为自动会向 div 添加滚动条。将溢出设置为隐藏，截断 最后一排。这两者都是不希望的。高度、最小高度 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>

Answer 1

“网格行间隙：7%；”是问题的原因，将其更改为百分比以外的其他值，这将解决您的问题

grid-row-gap: 2em;

同时删除或更改

style="height: 100%"

到

style="min-height: 100%"

在父级中允许网格在添加卡片时增长