Элемент сетки не покидает одну ячейку сетки

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, и это должно сработать.

Вот хорошее руководство , которое полностью охватывает сетку CSS.