为什么 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。

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

Answer 1

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

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

为什么 grid-template-rows 1fr 没有占用整个可用屏幕？

Why is grid-template-rows 1fr not taking the whole available screen?

html

css

css-grid

grid-layout