如何移除Grid布局中前两个列间隙并保留其余间隙？

当然可以用Grid布局实现这个需求！从你的描述来看，当前Grid布局给所有列之间都添加了10px的间隙，而你希望前两列（aa和bb）紧密排列，仅在后面的列之间保留间隙。下面分享几种实用的解决方案：

方案一：利用margin实现（无需修改HTML结构） #

这是最直接的方法，我们移除全局的grid-column-gap，然后给从第三列开始的子元素添加左外边距，模拟列间隙效果：

.myRow {
  display: grid;
  grid-template-columns: 0.1fr 0.1fr 2fr 3fr 2fr;
  grid-row-gap: 10px; /* 保留原有的行间隙 */
  justify-content: center;
  padding: 10px;
  /* 移除统一的grid-column-gap */
}

/* 给第3到第5个div添加左margin，模拟列间隙 */
.myRow div:nth-child(n+3) {
  margin-left: 10px;
}

这种方法不需要调整现有HTML结构，代码改动最小，完全符合你的期望效果。

方案二：嵌套Grid（结构更清晰） #

如果后续需要对前两列做统一的样式调整，把它们放到一个子Grid容器里会更清晰：

修改后的HTML #

<div class="myRow">
  <div class="first-col-group">
    <div style="color:blue; width: 5px;">aa</div>
    <div style="color:red;">bb</div>
  </div>
  <div style="color:green;">ccc</div>
  <div style="color:orange;">ddd</div>
  <div style="color:purple;">eee</div>
</div>

对应的CSS #

.myRow {
  display: grid;
  /* 父Grid列定义：第一个列容纳子容器，后面保持原比例 */
  grid-template-columns: auto 2fr 3fr 2fr;
  grid-column-gap: 10px; /* 所有列间隙统一为10px */
  grid-row-gap: 10px;
  justify-content: center;
  padding: 10px;
}

.first-col-group {
  display: grid;
  grid-template-columns: 0.1fr 0.1fr;
  /* 子Grid不设置列间隙，让两个元素紧密排列 */
}

父Grid的间隙会作用于子容器和后续列之间，而子容器内部的两个元素则没有间隙，完美匹配需求。

方案三：通过空轨道模拟间隙（进阶技巧） #

如果你需要更精准的间隙控制，可以在grid-template-columns中插入固定宽度的空轨道，手动指定每个元素的位置：

.myRow {
  display: grid;
  /* 前两列 + 空轨道 + 第三列 + 空轨道 + 第四列 + 空轨道 + 第五列 */
  grid-template-columns: 0.1fr 0.1fr 10px 2fr 10px 3fr 10px 2fr;
  grid-row-gap: 10px;
  justify-content: center;
  padding: 10px;
}

/* 指定每个子元素对应的轨道位置 */
.myRow div:nth-child(1) { grid-column: 1; }
.myRow div:nth-child(2) { grid-column: 2; }
.myRow div:nth-child(3) { grid-column: 4; }
.myRow div:nth-child(4) { grid-column: 6; }
.myRow div:nth-child(5) { grid-column: 8; }

这种方法灵活性极高，但需要手动绑定元素和轨道，适合复杂的布局场景。

以上几种方法都能完美实现你想要的效果，推荐优先使用方案一，因为它最简单且无需修改现有结构。

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