我得到了這個所說的響應式網格，我希望導航占據第一行，我設法實現了這一點，但是導航的高度變成了頁面的一半，我已經設法根據列表最初的高度弄清楚網格分為兩行，該行似乎沒有采用列表的新高度。導航欄下方有很多空白區域。我實際上希望以下項目出現在它的正下方，沒有多余的空間順便說一句，如果不知道位置，該怎么辦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 <i class="fas fa-user fa-lg"></i></a>                </li>                <li class="hide">                    <i class="fas fa-user-cog fa-lg"></i>                </li>                <li><a href="#">register <i class="fas fa-user-plus fa-lg"></i></a>                </li>                <li><a href="#">Log Out <i class="fas fa-sign-out-alt fa-lg "></i></a>                </li>                <li class="cart">                    <i class="fas fa-shopping-cart fa-3x"></i>                </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);}