CSS 网格 - 如何均匀对齐我的菜单项？

Question

So, I noticed that my menu items looked weird because some of the links are closers together than others due to the nav menu item having more letters.

I'm not sure what CSS I could add to ensure that they are all perfectly taking up the same space, while maintaining an even look. I'll include a picture below of what the problem looks like

Here is my code so far and as you can see the grid-template-columns perfectly space them 1fr each, but if you see "Home" is perfectly centered, but "about us" and "contact us" have much less space to work with and ends up making the menu items look like they aren't aligned properly.

 .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;
}

Is there a way to fix this?

Answer 1

You may use justify-content and auto instead 1fr .

example:

 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>