html - 消除网格间隙

Question

我有一个元素对齐为一行的 div，这是它的 css 类：

.myRow {
  display: grid;
  grid-template-columns: 0.1fr 0.1fr 2fr 3fr 2fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  padding: 10px;
}

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

我希望能够消除前两个间隙并保留其余的间隙，就像grid-template-columns工作原理一样。

可以用网格来做到这一点吗？

编辑：我希望它是这样的：

标签： htmlcsscss-grid

Answer 1

添加负右边距，其值等于网格间隙

.myRow {
  display: grid;
  grid-template-columns: 0.1fr 0.1fr 2fr 3fr 2fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  padding: 10px;
}

.margin {
  margin-right: -10px
}

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