如何在CSS Grid中仅为特定元素设置行/列间隙？

要实现你想要的「仅特定元素间保留间隙，其余元素无间隙」的效果，我们需要放弃全局的grid-gap（因为它会给所有网格轨道添加统一间隙，无法单独关闭局部间隙），转而通过给需要间隙的元素添加margin来精准控制，这样既能保留原有的网格布局结构，又能满足你的间距需求。

修改后的完整代码 #

CSS部分

body { margin: 40px; }
.wrapper {
 display: grid;
 /* 移除全局grid-gap，避免统一给所有轨道加间隙 */
 grid-template-columns: [col] 100px [col] 100px [col] 100px;
 grid-template-rows: [row] auto [row] auto [row] auto [row] auto;
 background-color: #fff;
 color: #444;
}
.box {
 background-color:#444;
 color:#fff;
 padding:20px;
 font-size:150%;
}
.a { 
 grid-column: col / span 2; 
 grid-row: row 1 / 3;
 /* 给A添加右侧和底部间隙，隔开右边的B/C、下方的D/E */
 margin-right: 10px;
 margin-bottom: 10px;
}
.b { grid-column: col 3 / span 1; grid-row: row ; }
.c { 
 grid-column: col 3 / span 1; 
 grid-row: row 2 ;
 /* 给C添加底部间隙，隔开下方的F */
 margin-bottom: 10px;
}
.d { 
 grid-column: col / span 1; 
 grid-row: row 3;
 /* 给D/E/F添加底部间隙，隔开下方的G/H/I */
 margin-bottom: 10px;
}
.e { 
 grid-column: col 2 / span 1; 
 grid-row: row 3;
 margin-bottom: 10px;
}
.f { 
 grid-column: col 3 / span 1; 
 grid-row: row 3;
 margin-bottom: 10px;
}
.g { grid-column: col / span 1; grid-row: row 4; }
.h { grid-column: col 2 / span 1; grid-row: row 4; }
.i { grid-column: col 3 / span 1; grid-row: row 4; }

HTML部分（无需修改）

<div class="wrapper">
 <div class="box a">A</div>
 <div class="box b">B</div>
 <div class="box c">C</div>
 <div class="box d">D</div>
 <div class="box e">E</div>
 <div class="box f">F</div>
 <div class="box g">G</div>
 <div class="box h">H</div>
 <div class="box i">I</div>
</div>

核心思路说明 #

• 移除全局grid-gap：grid-gap是作用于所有网格轨道（行与行、列与列之间的间隙），无法单独排除某几个轨道的间隙，所以先去掉它，让所有网格元素默认紧贴。
• 精准添加margin：给需要和其他元素保持间隙的盒子单独设置margin：
  • .a的margin-right和margin-bottom：确保它和右侧的B/C、下方的D/E之间有间隙
  • .c的margin-bottom：确保它和下方的F之间有间隙
  • .d/.e/.f的margin-bottom：确保它们和下方的G/H/I之间有间隙
• 保留原有网格结构：所有元素的grid-column和grid-row属性完全保留，不会影响你桌面端的其他布局调整。

这样修改后，就能完美实现你想要的布局效果：右侧B和C上下紧贴，下方D/E/F、G/H/I左右紧贴，其余需要间隙的位置都保留了10px的间距。

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