我如何使我的网格完全高度，而不是它缩小一些项目？

Question

我的网格中有8项；项目1和8分别是页眉和页脚，项目2-7是主体的一部分。

项目2-7采用两列格式。我遇到的问题是，当我扩大我的标题的高度(第1项)，其余的项目相应地收缩；我是卡住了，并希望得到一些帮助。谢谢。

这是我的代码：

​

html,
body {
  max-width: 100%;
  margin: 0 auto;
  background-color: white;
  overflow-x: hidden;
  padding: 0px;
  height: 100%;
}

.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-template-rows: 50% 50%;
  justify-items: stretch;
}

.item1 {
  grid-column-start: span 2;
  background-color: blue;
}

.item2 {
  background-color: pink;
}

.item3 {
  background-color: yellow;
}

.item4 {
  background-color: orange;
}

.item5 {
  background-color: black;
}

.item6 {
  background-color: purple;
}

.item7 {
  background-color: brown;
}

.item8 {
  background-color: green;
  grid-column-start: span 2;
}

<div class="container">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
  <div class="item4">D</div>
  <div class="item5">E</div>
  <div class="item6">F</div>
  <div class="item7">G</div>
  <div class="item8">H</div>
</div>

​

Answer 1

删除html标记，将样式更新为body和.container

body {
    max-width: 100vw;
    margin: 0px;
    background-color: white;
    padding: 0px;
}
.container {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: 81% 50% 30% auto 30%;
    justify-items: stretch;
}

最初的代码只定义了前2行的高度，我为其他行添加了一些随机值。auto还可以定义行高。