Сетка-столбец изменяет высоту в адаптивном макете сетки

---

Я это сказал, отзывчивый сетки,
где я хочу, чтобы навигатор занял первый ряд,
Я старался сделать это, однако высота навигатора становится половиной страницы,
Я постарался выяснить, что сетка разбивается на 2 строки, основываясь на высоте, на которой изначально был список,
строка, похоже, не занимает новую высоту списка.


То , что я на самом деле хочу, чтобы следующие элементы появились прямо под ним, навигатор имеет много пустого пространства под ним.

формат HTML:

<div class="container">
       <nav>
           <header>
               <h3>BestBook INC</h3>
           </header>
           <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Services</a></li>
               <li><a href="#">Contact</a></li>
               <li><a href="#">Login </a>
               </li>
               <li class="hide">
                   
               </li>
               <li><a href="#">register </a>
               </li>
               <li><a href="#">Log Out </a>
               </li>
               <li class="cart">
                   
               </li>
           </ul>
       </nav>

стиль CSS:

.container{
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
}

nav{
    grid-column: 1/-1
}
nav ul{
    display: grid;
    list-style: none;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
}
nav a{
    background-color: var(--primary);
    text-decoration: none;
    display: block;
    text-align: center;
    color:var(--dark);
    padding: 0.48rem;
    font-size: 1.1rem;
    box-shadow: var(--shadow);
}

Что я уже пробовал:

Новичок в Css grid, пытающийся схватить его

---