Имея трудности с компоновкой сетки, Row занимает намного больше, чем высота содержимого

Question

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

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

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

и BTW, не зная места, как бы это было go о

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>