消除网格间隙

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-gap 属性（以前的 grid-column-gap 和 grid-row-gap）只接受一个值。

这里详细介绍了这个问题：

• Setting different lengths for grid gaps in CSS Grid

---

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

此处解释了此行为：

• pseudo-element acting like a grid item in CSS grid

---

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

更多细节在这里：

• Consider the order property of flex and grid layouts

---

结合起来，您可以使用::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; }