Les éléments de navigation ne sont pas affectés par l'affichage : grille

Question

J'ai quelques éléments ul li dans une barre de navigation définie sur l'affichage en grille mais cela ne fonctionne pas comme je m'y attendais. L'élément li apparaît comme si aucune grille n'était appliquée.

Voici le 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>

Mais lorsque j'applique la classe grid-container à l'élément ul au lieu de nav, cela fonctionne bien.

Quelqu'un peut-il expliquer la différence ? Si je souhaite configurer nav pour qu'il affiche : grille, comment dois-je procéder ?

Answer 1

Étant donné que nav n'a qu'un seul élément enfant (ul), l'effet de (display:grid) n'apparaîtra que sur ul. Si vous souhaitez traiter li comme une boîte de grille, vous devez ajouter une classe (grid-container) à ul à la place de nav. pour obtenir le bon effet

N'oubliez pas que l'effet de la grille d'affichage n'apparaîtra que sur les éléments enfants, vous ne pouvez donc pas ajouter de grille d'affichage à la navigation et voir l'effet sur li, car li n'est pas un élément enfant de la navigation

Veuillez vous référer au code suivant

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