CSS Subgrid导致不必要间隙的问题求助

嘿，我完全懂你碰到的这个头疼问题——用CSS Subgrid做卡片布局时，明明已经给子卡片设了row-gap: 0，可中间还是留着没法消除的空白，而且这空白还跟父网格的row-gap绑定在一起，太闹心了！

问题根源 #

其实这是Subgrid的工作特性导致的：当你给.card设置grid-template-rows: subgrid时，它是直接复用父网格的行轨道，包括父网格里定义的row-gap。这个row-gap是父网格轨道与轨道之间的间距，属于父网格的设置，不是子卡片内部的间隙——所以你在子卡片里设row-gap: 0根本影响不到它。那些没有middleRow的卡片，虽然没在第二行轨道放内容，但父网格的第二行轨道和对应的gap依然存在，自然就会出现空白。

解决方法 #

最直观的修复方式是把父网格的row-gap替换成卡片的margin，这样既能保持卡片之间的间距，又不会干扰Subgrid内部的轨道：

1. 先修改父网格样式，移除row-gap：

.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-auto-rows: min-content;
  column-gap: 15px;
  /* 移除row-gap，改用margin控制卡片间距 */
}

2. 给卡片添加底部间距，同时排除每行最后3个卡片（因为你的网格是3列，每行末尾的卡片不需要底部间距）：

.card {
  border: 1px solid black;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
  /* 卡片之间的底部间距 */
  margin-bottom: 50px;
}

/* 去掉最后一行3个卡片的底部间距 */
.card:nth-last-child(-n+3) {
  margin-bottom: 0;
}

这样调整后，卡片之间的50px间距和原来完全一致，而没有middleRow的卡片内部，Top和Bottom行之间的空白就会被彻底消除——因为父网格的row-gap不再干扰Subgrid的轨道，子卡片的row-gap: 0也能正常发挥作用。

内容来源于stack exchange