如何使用CSS Grid移除列之间的垂直间距？

首先纠正你CSS代码中的属性拼写错误：grid-template-column 应为 grid-template-columns，这是Grid布局中定义列轨道的正确属性名。

针对列项间出现的垂直间距，可通过以下几种方式排查解决：

• 清除子元素默认边距：检查Grid子元素是否自带浏览器默认的margin/padding（尤其是垂直方向），直接重置即可：

  .grid-item {
    margin: 0;
    padding: 0;
  }
  

• 重置Grid容器间距属性：若容器设置过gap或row-gap（控制垂直方向间距），将其设为0即可消除间距：

  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0; /* 仅需垂直间距清零可改用 row-gap: 0; */
  }
  

• 调整垂直对齐方式：Grid容器默认align-items: stretch，若子元素高度未占满轨道，可能出现视觉空隙，可按需修改对齐方式：

  .grid-container {
    align-items: start; /* 可选值：center / end，根据布局需求选择 */
  }
  

• 检查子元素高度设置：确认子元素的height/min-height属性是否合理，或因box-sizing导致高度计算偏差，确保子元素高度无额外空白区域。

结合你提供的截图来看，最可能的原因是子元素自带垂直边距或Grid容器的row-gap未清零，优先排查这两项即可实现列项紧密贴合的效果。

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