Строка сетки CSS не работает

Question

Я могу заставить div перемещаться в правильный столбец, но не в правильную строку.

Это покажет синий прямоугольник в правильном столбце, но по какой-то причине он не перемещается в строкуМне это нужно.Спасибо всем за помощь.

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 10% 80% 10%;
}

#navigation {
  grid-column: 2/2;
  grid-row: 2/2;
  height: 400px;
  width: 100%;
  background-color: blue;
}

<div id="navigation"></div>
<div id="menunBar"></div>
<div id="mainContent"></div>

Answer 1

Вы используете проценты для установки высоты строк.Это означает, что требуется родительская ссылка .

Установите высоту для контейнера сетки.

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 10% 80% 10%;
  height: 100vh; /* new */
}

#navigation {
  grid-column: 2/2;
  grid-row: 2/2;
  height: 400px;
  width: 100%;
  background-color: blue;
}

body {
  margin: 0;
}

<div id="navigation"></div>
<div id="menunBar"></div>
<div id="mainContent"></div>

Подробнее:

• Почему процентная высота не работает на моем div?
• Как сделать div на 100% высоты окна браузера?