列出自动适合网格？

Question

当前，我有一个定义了宽度和高度的水平列表。我正在尝试调整列表大小以使其保持在定义的高度和宽度中，如果我继续将项目添加到列表中，它将继续调整大小以适合该定义的宽度和高度。

我将网格设为一行，因此列表仍然是水平的，而不是自动调整的列。

 <div id="head">
    <header>
      <div class="brand">
       <img class="icon" src="Image/CicularFlare.png" height="100" width="100">
      <h1 id="comp-name">KRAYCAM</h1>
      <h2><a id="grayscale" href="grayscale-site/about_gs.html">Visit Grayscale Site</a></h2>
    </div>
    <ul id="hornav">
      <li>What we do</li>
      <li>What we Support</li>
      <li>Our Partners</li>
      <li>Our Sponspors</li>
    </ul>
  </header>
</div>

#hornav {
    list-style: none;
    color: gray;
    display: grid;
    margin-right: 30%;
    margin-left: 25%;
    width: 55%;
    height: 7.10vw;
    grid-template-rows: 1fr;
    grid-template-columns: auto-fit;
    position: fixed;
    z-index: 2;
}

#hornav li {
    display: inline-block;
    padding: 0 1.5vw;
    text-align: center;
    flex-wrap: wrap;
    width: 95%;
    background-color: yellow;
}