为什么 grid-template-rows 1fr 没有占据整个可用屏幕？ [复制]

Question

这是我的html：

<div id="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

还有我的css：

#wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#wrapper {
  border: 2px solid #f76707;
  
}

#wrapper > div {
  border: 2px solid #ffa94d;
}

这就是结果：

有一个jsFiddle。

为什么行没有被拉伸以占据所有可用的屏幕空间？

Answer 1

因为您的wrapper 没有全屏高度。像这样重构你的代码：

#wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height:100vh;
}