有没有办法在网格间隙上伸展网格项目？

Question

我有一个容器和一个孩子

.container {
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  gap: 20px;
  width: 100%;
}

.container .child {
  grid-column: 1/ 4;
}

是否有一种方法可以将.Child在第5列旁边带上）

Answer 1

根据 mdn docs ：

在网格尺寸方面，缝隙的作用似乎是常规的网格轨道，但是没有任何东西可以放在缝隙中。差距的作用好像该位置的网格线已经获得了额外的尺寸，因此在该线路结束时放置的任何网格项目都在缝隙的末端开始。

因此，您必须将内容与rain -right：-20px重叠您的内容。

.container {
  background: green;
  display: grid;
  height: 200px;
  grid-template-columns: repeat(21, 1fr);
  gap: 20px;
  width: 100%;
}

.container .child {
  grid-column: 1/ 4;
  background: orange;
  margin-right: -20px;
}

<div class="container">
  <div class="child" />
</div>

Answer 2

如果您想要.Child 列5 ie 第4列加上20px，如您所述。

解决的简单方法是将保证金：-20px添加到child

希望它能有所帮助！