消除网格间隙

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工作原理一样。

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

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

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>

Answer 2

您不能为网格间隙设置多个尺寸。和属性（以前为column-gap和）仅接受单个值。row-gapgrid-column-gapgrid-row-gap

这个问题在这里有详细介绍：

• 在 CSS Grid 中为网格间隙设置不同的长度

应用于网格容器的伪元素被视为网格项。

此行为的解释如下：

• 伪元素的作用类似于 CSS 网格中的网格项

该order属性可用于在屏幕上重新排列网格项目。

更多详细信息请参见此处：

• 考虑orderflex和grid布局的属性

::before结合起来，您可以使用和::after伪元素创建列间隙（只有两个） ，用order属性安排它们的位置，并摆脱grid-column-gap规则。

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

.myRow::before {
  content: "";
  width: 10px;
  background-color: white;
}

.myRow::after {
  content: "";
  width: 10px;
  background-color: white;
}

.myRow > :nth-child(1) { order: -3; }
.myRow > :nth-child(2) { order: -2; }
.myRow > :nth-child(3) { order: -1; }
.myRow > :nth-child(5) { order: 1; }

.myRow > div {
  background-color: lightgray;
}

<div class="myRow">
  <div style="color:blue;">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>

以下是有关其工作原理的更多信息：

order由于该属性的默认值为0，并且项目按源顺序放置，这就是浏览器看到nth-child上面的伪类代码的方式：

.myRow > :nth-child(1) { order: -3; }
.myRow > :nth-child(2) { order: -2; }
.myRow > :nth-child(3) { order: -1; } /*
.myRow > ::before      { order: 0; }
.myRow > :nth-child(4) { order: 0; }
.myRow > ::after       { order: 0; } */
.myRow > :nth-child(5) { order: 1; }