Grid-column changes height in responsive grid layout

See more:

CSS3

HTML5

I got this said responsive grid,
where i want the nav to take up the first row,
I manged to accomplish that, however the height of the nav becomes half the page,
I've manged to figured out the the grid splits into 2 rows, based on the height the list was initially,
the row doesnt seem to take the new height of the list.


What i actually want the following items to appear just below it , the nav has alot of empty space below it.

The 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 class="fas fa-user fa-lg"__^
               </li>
               <li><a href="#">register ^__i class="fas fa-user-plus fa-lg"></a>
               </li>
               <li><a href="#">Log Out ^__i class="fas fa-sign-out-alt fa-lg "></a>
               </li>
               <li class="cart">
                   ^__i class="fas fa-shopping-cart fa-3x">
               </li>
           </ul>
       </nav>

The 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);
}

What I have tried:

New to Css grid, trying to graps it