CSS Grid - 我如何才能均匀地排列我的菜单项？

Question

我注意到我的菜单项看起来很奇怪，因为一些链接比其他链接更接近，因为导航菜单项有更多的字母。

我不知道我可以添加什么CSS来确保它们都完美地占据相同的空间，同时保持均匀的外观。我在下面附上一张图片，说明问题的样子

这是我的代码，到目前为止，你可以看到网格-模板-列完美地将它们各隔开1fr，但如果你看到 "主页 "是完全居中的，但 "关于我们 "和 "联系我们 "的空间要小得多，最终使菜单项看起来像他们没有正确对齐。

 .nav-menu {
display: grid;
grid-template-columns: repeat(4, 1fr);
list-style: none;
text-align: center;

}

.nav-links {
color: white;
text-decoration: none;
transition: color 0.3s ease-out;
}

有什么办法可以解决这个问题吗？

Answer 1

你可以使用 justify-content 和 auto 而是 1fr .

例如：

ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  border: solid;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  width: 356.84px;
  margin-bottom:1em;
}


/* Possible Update */

ul+ul {
  grid-template-columns: repeat(4, auto);
  justify-content: space-around;
}

li {
  list-style: none;
  box-shadow: 0 0 0 1px;
}

a {
  background: lightblue;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>