Navigation elements are not affected by display: grid

Question

I have some ul li elements in a navbar set to grid display, but it's not working like I expected. The li element appears as if no grid is applied.

This is the code:

* {
  padding: 0;
  margin: 0;
}

.grid-container {
  display: inline-grid;
  grid-auto-columns: auto auto auto auto;
  text-decoration: none;
}

.grid-container li {
  list-style: none;
}

<nav class="grid-container">
  <ul>
    <li class="grid-item one"><a href="#">Jenish Potsangbam</a></li>
    <li class="grid-item two"><a href="#">Socials</a></li>
    <li class="grid-item three"><a href="#">Resume</a></li>
  </ul>
</nav>

But when I apply the grid-container class to the ul element instead of the nav, it works fine.

Can someone explain their difference? If I want to set nav to display: grid, how should I do it?

Answer 1

Because nav has only one child element (ul), the effect of (display:grid) will only appear on ul. If you want to treat li as a grid box, you should add class (grid-container) to ul instead of nav to get the correct effect

Please remember that the effect of display grid will only appear on child elements, so you cannot add display grid to nav and see the effect on li, because li is not a child element of nav

Please refer to the following code

* {
  padding: 0;
  margin: 0;
}

.grid-container {
  display: inline-grid;
  grid-auto-columns: 100px 100px 100px 100px;
  grid-auto-rows: 100px 100px 100px 100px;

  text-decoration: none;
}

.grid-container li {
  list-style: none;
}

<nav>
  <ul class="grid-container">
    <li class="grid-item one"><a href="#">Jenish Potsangbam</a></li>
    <li class="grid-item two"><a href="#">Socials</a></li>
    <li class="grid-item three"><a href="#">Resume</a></li>
  </ul>
</nav>