CSS Grid Navigaton Bar - Как правильно добавить разделители кнопок?

Question

Я проектирую новую навигацию на основе сетки CSS, но мне интересно, есть ли лучший способ реализовать разделитель навигационных кнопок, чем граница справа.

Я думал о реализации разделителей навигации, основанных на линиях сетки, но я не знаю, возможно ли это, и это может быть осуждено на практике.

Мой дизайн оставляет границусправа справа самый элемент "имя", что нежелательно.Я попытался использовать nth-child, чтобы отключить его, но это было неэффективно.

Есть ли лучший способ разделить кнопки в навигационной панели сетки CSS, чем использовать свойство border?Я в основном использую css и html для навигации.

Любой вклад приветствуется.Большое спасибо!

nav {
  display: grid;
  grid-template-columns: auto auto auto auto 1fr auto;
  padding: 0;	
  font: bold .95em Arial, sans-serif;
  background: #555555; 
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  align-items: center;
}

nav a {
  text-decoration: none;
  text-align: center;
  border-right: 1px solid #161616;
  color: #CCC;
  padding: 10px 16px;		/*top&bott, right&left*/
}

nav a:hover {background: #2a2a2a;}
nav a.active {background: #2a2a2a;}

<nav>
  <a class="active" href="index">PROJECTS</a>
  <a href="cine">VIDEOS</a>
  <a href="photosets">PHOTOS</a>
  <a href="aboutme">ABOUT</a>
  <div></div>
  <a href="aboutme">NAME</a>
</nav>

Answer 1

Я бы поместил отдельные ссылки в список.Элемент nav является семантическим контейнером, но не подходит для отображения.И вот обновленный CSS, чтобы переместить последний элемент в конец сетки и удалить границу.

nav ul {
    display: grid;
    grid-template-columns: auto auto auto auto 1fr auto;
    padding: 0; 
    font: bold .95em Arial, sans-serif;
    background: #222222; 
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    align-items: center;
    list-style: none;
}
nav li {
    text-decoration: none;
    text-align: center;
    border-right: 1px solid #161616;
}
nav li a {
    color: #CCC;
    text-decoration: none;
    display: inline-block;
    padding: 10px 16px;
}
nav li:last-child {
    justify-self: end;
    border-right: none;
}

Вот обновленная разметка.

<nav>
    <ul>
        <li><a class="active" href="index">PROJECTS</a></li>
        <li><a href="cine">VIDEOS</a></li>
        <li><a href="photosets">PHOTOS</a></li>
        <li><a href="aboutme">ABOUT</a></li>
        <li><a href="aboutme">NAME</a></li>
    </ul>
</nav>