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

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

你可能真的想使用flex

header>*{

  margin:0;

}

.container{

  width:100vw; height:100vh; text-align:center;

}

nav>ul{

  display:flex; list-style:none; padding:0;

}

nav>ul>li>a{

  text-decoration:none; padding: 0.48rem; font-size:1.1rem; white-space:nowrap;

}

nav>ul>li{

  flex:1;

}

.hide{

  display:none;

}

<header><h3>BestBook INC</h3></header>

<div class='container'>

  <nav>

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

    </ul>

  </nav>

  <div>

    <div>one</div>

    <div>two</div>

  </div>

</div>