为何CSS Grid超出父容器？Angular15组件布局问题求助

云上老周

2026-7-14

解决Angular 15中CSS Grid多行时超出父容器的问题

问题核心

你的网格容器在多行时超出父容器，根源在于用了百分比单位的行间距（grid-row-gap:7%）。CSS Grid里，百分比行间距是基于网格容器自身高度计算的，当行数增加，行间距的总高度会跟着父容器高度不断叠加，形成循环计算，导致网格容器被越撑越大，最终超出父容器。

解决方案

把百分比的行间距替换成固定单位（如px、em），彻底避免循环依赖的问题，让网格总高度可以被正确计算，自然适配父容器。

修改后的代码示例

HTML（移除不必要的内联样式）

<div class="services-section">
  <div class="grid">
    <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>

CSS（替换百分比行间距为固定值）

.services-section {
  border: 1px solid blue;
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 0 1.5em;
  /* 用固定px值替代百分比行间距，列间距保留百分比也没问题 */
  gap: 20px 5%;
}