Grid布局仅2行时行间距过大，多行显示正常问题求助

你遇到的这个Grid布局行间距异常的问题，根源在于容器的固定高度和Grid默认的对齐规则冲突了，我来帮你拆解清楚：

问题原因 #

你给.thumbnail-grid设置了height: 250px的固定高度，而Grid布局默认的align-content属性值是stretch：

• 当只有2行单元格时，两行的总高度（100px×2）加上行间距（5px）总共是205px，远小于容器的250px高度。此时stretch会把容器的剩余空间（250-205=45px）自动分配到行与行的间隙中，导致看起来行间距远大于你设置的5px。
• 当有3行及以上时，单元格总高度（100px×3 + 5px×2=310px）超过了容器的250px，容器触发滚动条，没有剩余空间可以分配，行间距就会正常显示为你设置的5px。

先看一下你提供的效果对比：
2行异常效果：

3行正常效果：

你的原始代码如下：

HTML结构 #

<div class="thumbnail-container">
  <div class="thumbnail-grid">
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
    <!-- and so on... -->
  </div>
</div>

CSS规则 #

.thumbnail-container { overflow: scroll; }
.thumbnail-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
  height: 250px;
  margin: 8px;
}
.thumbnail-grid-cell {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: relative;
}

解决方案 #

这里提供3种可行的解决方式，你可以根据自己的需求选择：

方案1：移除容器的固定高度（推荐，最符合自适应场景） #

如果不需要容器固定高度，直接去掉height:250px，让容器高度由内容自动撑开，这样就不会有剩余空间分配的问题：

.thumbnail-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
  /* 移除 height: 250px; */
  margin: 8px;
}

方案2：修改align-content属性（保留固定高度的场景） #

如果必须保留容器的固定高度，把align-content设置为start（或者flex-start，效果一致），让行顶部对齐，剩余空间留在容器底部，行间距就会保持设置的5px：

.thumbnail-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
  height: 250px;
  margin: 8px;
  align-content: start; /* 添加这一行 */
}

方案3：固定行高（精准控制每行高度的场景） #

通过grid-auto-rows指定每行的固定高度为100px，确保即使容器有剩余空间，行也不会被拉伸，行间距保持设置值：

.thumbnail-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
  height: 250px;
  margin: 8px;
  grid-auto-rows: 100px; /* 添加这一行 */
}

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