17370845950

最直接有效的办法是使用 row-gap 控制行间距，它只作用于网格容器的行之间，支持多种单位，设为0可消除空隙，且兼容现代浏览器。

Grid网格布局中行间距太大，最直接有效的办法就是用 row-gap 单独控制行与行之间的间隙，而不影响列间距或元素内部样式。

row-gap 是专治“行距过大”的精准开关

它只作用于网格容器的行之间，和 column-gap 互不干扰。设置后，所有相邻行之间的空白区域会统一按该值计算，不会牵连到单元格内容、padding 或 margin。

• 支持像素（px）、em、rem、百分比等常见单位
• 可以设为 0 来完全消除行间空隙
• 在 Grid 布局启用后（即 display: grid 或 inline-grid），它才生效

别和 margin 或 padding 混着用

很多人发现行距大，第一反应是给子元素加 margin-bottom，结果导致最后一行下方也多出空白，或者响应式时错位。row-gap 才是语义正确、布局干净的解法。

• 子项无需额外设置 margin，避免嵌套干扰
• 换行逻辑由 Grid 自动处理，row-gap 始终对齐行轴方向
• 媒体查询中可单独调整 row-gap，适配不同屏幕

兼容性放心，现代项目基本无压力

Chrome 66+、Firefox 63+、Safari 14.1+、Edge 79+ 都原生支持 row-gap。如需兼容老版本 Safari（

• grid-gap: 12px;（已废弃但兼容性更好）
• 或用 gap: 12px;（推荐，现代标准，多数场景够用）

基本上就这些。调行距，认准 row-gap —— 简单、干净、不误伤其他布局。