如何使用CSS Grid消除行间距，实现三列并排布局？

要解决行间距问题并保持三列并排效果，你可以按以下方式调整代码：

• 移除行间距：在Grid容器样式中添加 row-gap: 0;，直接清除行与行之间的间距。
• 优化列宽设置：将固定百分比的列定义替换为 repeat(3, 1fr)，让三列自动平分容器宽度，适配性更强；保留你原本设置的 column-gap: 40px 来维持列间距。

修改后的CSS代码：

{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    row-gap: 0;
}

如果调整后仍有行间距，检查你的目录子项（Grid子元素）是否自带 margin-top/margin-bottom，给这些子元素加上 margin: 0; 即可彻底清除额外间距。

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