Elemen navigasi tidak terjejas oleh paparan: grid

Question

Saya mempunyai beberapa elemen ul li dalam bar navbar yang ditetapkan kepada paparan grid tetapi ia tidak berfungsi seperti yang saya jangkakan. Elemen li muncul seolah-olah tiada grid digunakan.

Ini kodnya:

* {
  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>

Tetapi apabila saya menggunakan kelas grid-container pada elemen ul dan bukannya nav, ia berfungsi dengan baik.

Bolehkah seseorang menerangkan perbezaannya? Jika saya ingin menetapkan nav untuk memaparkan: grid, bagaimana saya harus melakukannya?

Answer 1

Oleh kerana nav hanya mempunyai satu elemen anak (ul), kesan (paparan:grid) hanya akan muncul pada ul Jika anda ingin menganggap li sebagai kotak grid, anda harus menambah kelas (bekas grid) pada ul sebaliknya. untuk mendapatkan kesan yang betul

Sila ingat bahawa kesan grid paparan hanya akan muncul pada elemen kanak-kanak, jadi anda tidak boleh menambah grid paparan pada nav dan melihat kesan pada li, kerana li bukan elemen kanak-kanak nav

Sila rujuk kod berikut

* {
  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>