Grid-row-gap百分比不生效：行间距消失原因排查

嘿，你的猜测方向是对的，行间距紧密贴合的情况确实和你用固定像素定义行高有关，不过咱们来拆解下具体原因和解决办法：

问题根源 #

你当前的代码里：

• grid-template-rows 设置了固定的 180px 行高
• grid-gap: 2.5% 2.5% 中，行间距的百分比值是相对于网格容器的宽度计算的（Grid布局里，百分比形式的gap是基于容器的inline尺寸，也就是水平方向的宽度）

这就会导致两种情况：

1. 如果你的容器宽度较小，2.5%的行间距会非常窄，视觉上几乎看不见，看起来像是行与行紧密贴合；
2. 即便行间距存在，若图片高度接近180px，图片会填满行高区域，视觉上和相邻行的图片连在一起，让你误以为没有间距。

解决方案 #

根据你的需求，这里有几个可行的调整方案：

方案1：让行高自适应图片高度（推荐，如果不需要固定行高） #

把固定的行高改成auto，让网格行根据图片实际高度自适应，这样gap的间距会清晰显示：

.grid {
 margin-left: 5%;
 margin-right: 5%;
 display: grid;
 grid-template-columns: repeat(4, 1fr); /* 用repeat简写更简洁 */
 grid-template-rows: repeat(5, auto);
 grid-gap: 2.5% 2.5%;
}
/* 别忘了给图片加限制，避免超出网格项 */
.box img {
 max-width: 100%;
 max-height: 100%;
 object-fit: contain; /* 可选，保持图片比例不拉伸 */
}

方案2：保持固定行高，改用固定像素的行间距 #

如果你需要统一的180px行高，把行间距改成固定像素值，这样不管容器宽度如何，行间距都能稳定显示：

.grid {
 margin-left: 5%;
 margin-right: 5%;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(5, 180px);
 grid-gap: 20px 2.5%; /* 行间距用px，列间距保留百分比 */
}
.box img {
 max-width: 100%;
 max-height: 100%;
 object-fit: contain;
}

方案3：用fr单位配合minmax实现弹性行高 #

如果想要行高有一定弹性，同时限制最大高度，可以用minmax：

.grid {
 margin-left: 5%;
 margin-right: 5%;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(5, minmax(auto, 180px)); /* 最小自适应，最大180px */
 grid-gap: 2.5% 2.5%;
}

内容的提问来源于stack exchange，提问作者Tv's Very Own