网格布局有困难，行占用的空间超过内容高度

Question

我得到了这个所说的响应式网格，我希望导航占据第一行，我设法实现了这一点，但是导航的高度变成了页面的一半，

我已经设法根据列表最初的高度弄清楚网格分为两行，该行似乎没有采用列表的新高度。导航栏下方有很多空白区域。

我实际上希望以下项目出现在它的正下方，没有多余的空间

顺便说一句，如果不知道位置，该怎么办

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

}

Answer 1

去除高度：100vh；来自容器 CSS。看看我创建的这支笔。https://codepen.io/aakash-sharma1/pen/yLNQWMvheight: 100vh;

Answer 2

你可能真的想使用flexheader>*{&nbsp; margin:0;}.container{&nbsp; width:100vw; height:100vh; text-align:center;}nav>ul{&nbsp; display:flex; list-style:none; padding:0;}nav>ul>li>a{&nbsp; text-decoration:none; padding: 0.48rem; font-size:1.1rem; white-space:nowrap;}nav>ul>li{&nbsp; flex:1;}.hide{&nbsp; display:none;}<header><h3>BestBook INC</h3></header><div class='container'>&nbsp; <nav>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li><a href='#'>Home</a></li>&nbsp; &nbsp; &nbsp; <li><a href='#'>About</a></li>&nbsp; &nbsp; &nbsp; <li><a href='#'>Services</a></li>&nbsp; &nbsp; &nbsp; <li><a href='#'>Contact</a></li>&nbsp; &nbsp; &nbsp; <li><a href='#'>Login <i class='fas fa-user fa-lg'></i></a></li>&nbsp; &nbsp; &nbsp; <li><a href='#'>register <i class='fas fa-user-plus fa-lg'></i></a></li>&nbsp; &nbsp; &nbsp; <li><a href='#'>Log Out <i class='fas fa-sign-out-alt fa-lg '></i></a></li>&nbsp; &nbsp; </ul>&nbsp; </nav>&nbsp; <div>&nbsp; &nbsp; <div>one</div>&nbsp; &nbsp; <div>two</div>&nbsp; </div></div>