html - 网格项不离开一个网格单元

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 网格。