Html 消除网格间隙

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

.myRow{
显示：网格；
网格模板柱：0.1fr 0.1fr 2fr 3fr 2fr；
栅柱间隙：10px；
网格行间距：10px；
证明内容：中心；
填充：10px；
}

aa
bb
ccc
ddd
eee

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

.myRow{
显示：网格；
网格模板柱：0.1fr 0.1fr 2fr 3fr 2fr；
栅柱间隙：10px；
网格行间距：10px；
证明内容：中心；
填充：10px；
}
.保证金{
右边距：-10px
}

aa
bb
ccc
ddd
eee

不能为网格间隙设置多个尺寸。和属性（以前的

网格列间距

和

网格行间距

）仅接受单个值

此处详细介绍了该问题：

---

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

这里解释了这种行为：

---

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

详情如下：

---

结合使用，您可以使用

：before

和

：：after

伪元素创建列间距（只有两个），使用

order

属性安排它们的位置，并取消

网格列间距

规则

.myRow{
显示：网格；
网格模板列：0.1fr 0.1fr 2fr auto 3fr auto 2fr；
证明内容：中心；
填充：10px；
}
.myRow:：之前{
内容：“；
宽度：10px；
背景色：白色；
}
.myRow:：之后{
内容：“；
宽度：10px；
背景色：白色；
}
.myRow>：第n个子（1）{顺序：-3；}
.myRow>：第n个子（2）{顺序：-2；}
.myRow>：第n个子（3）{顺序：-1；}
.myRow>：第n个子（5）{顺序：1；}
.myRow>div{
背景颜色：浅灰色；
}

aa
bb
ccc
ddd
eee

请参见类似问题：这完全不同，我不希望有间隙，因此ccc、ddd、eee单元将占据前两个间隙的空间@索尔那不是我想要的，我希望细胞之间的前3个间隙不存在，但ccc细胞仍然在同一个地方。@shinzou这怎么不是你想要的？它与您的图像相匹配，以获得您想要的结果。如果选择一个聪明的简单解决方案，您可能不会认为这会很聪明，但是为什么之前和之后不应用于顺序<0？之前和之后的选择器不应用于前3个div，为什么？（前后选择器负责间隙）

：nth-child（）

选择器仅适用于DOM元素。他们忽略CSS元素。这就是为什么我要绕过伪证我还是不明白。。。为什么会出现红场？（前3个元素在DOM中）