求助：grid-row-gap导致网格布局中占2行的首个元素额外增高

你的问题核心来自两个点：默认盒模型的高度计算规则，以及网格间隙与跨轨道元素的高度关联。

问题原因 #

1. 盒模型的额外高度叠加：你给#one设置的max-height: 300px是内容区域的高度（默认box-sizing: content-box规则），但元素的padding: 0.75rem和border: 3px会额外加到总高度上。按1rem=16px计算，上下padding共24px、上下border共6px，光这两部分就多了30px，再加上浏览器的小数精度，最终总高度接近332px。

2. 网格间隙的影响：当元素用grid-row: span 2跨两行时，它会包含两行轨道之间的grid-row-gap空间。也就是说，元素的理论高度是150px + 30px + 150px = 330px，再叠加盒模型的额外高度，就超过了你预期的300px。

修复步骤 #

1. 统一盒模型规则 #

给所有网格子元素加上box-sizing: border-box，让padding和border包含在设置的高度内，避免额外高度叠加：

#grid div {
    box-sizing: border-box; /* 新增该行 */
    margin: 0;
    padding: 0.75rem;
    border: 3px solid #FFF;
    border-radius: 12px;
    overflow: hidden;
    background: #3A3A3A;
}

2. 调整元素高度设置 #

现在用了border-box，你设置的高度会直接包含padding和border。如果要让#one总高度为300px，直接设置height: 300px即可；同时修正网格列的写法（原grid-template-columns: 1无效，改为1fr）：

#grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 150px);
  grid-row-gap: 30px;
  width: 600px;
}

#one {
  grid-row: span 2;
  height: 300px; /* 总高度包含padding和border */
}

最终修复代码 #

<div id="grid">
    <div id="one">1 - height is now 300px (total, including padding and border)</div>
    <div id="two">2 - height is 150px, as expected</div>
</div>

<style>
body {
  background: #000;
  color: #fff;
}

#grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 150px);
  grid-row-gap: 30px;
  width: 600px;
}

#grid div {
    box-sizing: border-box;
    margin: 0;
    padding: 0.75rem;
    border: 3px solid #FFF;
    border-radius: 12px;
    overflow: hidden;
    background: #3A3A3A;
}

#one {
  grid-row: span 2;
  height: 300px;
}
#two {
  grid-row: span 1;
}
</style>

调整后，#one的总高度（包含padding和border）刚好是300px，#two保持150px，网格整体布局符合预期。

内容的提问来源于stack exchange，提问作者Gray Ayer