CSS Subgrid行间距（Row Gap）不显示问题求助

核心原因 #

子网格能继承父网格的gap，但有个关键前提：父网格的对应轨道必须是显式轨道——也就是通过grid-template-rows/grid-template-columns明确定义的轨道。

你这里父网格#gridContainer没设置grid-template-rows，所有行都是浏览器自动生成的隐式轨道。根据CSS Grid规范，子网格无法继承隐式轨道的行间距，所以子网格行gap为0；而列是你显式定义的两列，因此列gap能正常继承父网格的设置。

为什么加grid-template-rows会导致重叠 #

你之前尝试添加grid-template-rows后出现内容堆叠，大概率是因为设置的行轨道高度不足以容纳子网格的内容。比如写了固定高度（如grid-template-rows: repeat(4, 30px)），但子网格里的表单元素（输入框、标签等）高度超过了轨道高度，就会出现重叠。

正确的根源解决方法 #

给父网格定义自适应内容的显式行轨道，同时保留子网格的subgrid设置：

#gridContainer {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 你的两列布局 */
  grid-template-rows: repeat(auto-fit, auto); /* 让行轨道自适应内容高度，自动生成足够行 */
  gap: 1em;
}

/* 子网格类样式 */
.subgrid-item {
  display: grid;
  grid-column: span 2; /* 根据布局调整跨列数 */
  grid-template-rows: subgrid; /* 继承父网格的显式行轨道 */
}

这样子网格就能正常继承父网格的行gap，无需手动设置gap-row: 1em。如果表单行数固定，也可以直接指定行数，比如grid-template-rows: repeat(5, auto)，效果一致。

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