网格项目不会离开一个网格单元

Question

如您所见，我将.content div分为五个相等的列。我想将导航（nav）放在最后两列的中心。

我指定了它的位置应该在4 / 5上，并且还添加了justify-self: center来居中，但是显然，该元素只是停留在第4列上。我也检查了它，无论如何它都不会留下任何一列。我该如何解决？

.content {
  height: 100vh;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
}

.content nav {
  grid-column: 4 / 5;
  grid-row: 1;
  align-self: center;
  justify-self: center;
}

.content nav a {
  margin: 0cm 0.5cm 0cm 0.5cm;
}

<div class="content">
  <nav>
    <a href="#">Text #1</a>
    <a href="#">Text #2s</a>
    <a href="#">Text #3</a>
    <a href="#">Text #4</a>
  </nav>
</div>

Answer 1

grid-column: 4 / 5不能按预期工作，因为数字4和5并不代表网格单元，而是网格线。

看看这张照片：

grid-column: 3 / 5在这里是指将此区域放置在第3行和第5行之间。

正如@VXp在评论中所说-将其设置为grid-column: 4 / 6或grid-column: 4 / span 2，应该这样做。

这是一个很好的guide，可以完全覆盖CSS网格。