为什么 fr 单位不能与 CSS 网格上的 grid-template-rows 一起使用？

Question

我无法grid-template-rows与单位一起工作fr。我可以让行高随其他单位（如像素）变化，但不能随fr单位变化。

我不明白为什么这不起作用，因为这些fr单位正在使用grid-template-columns.

.grid-container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

  grid-gap: 5px;

  text-align: center;

}

<div class="grid-container">

  <div class="item"> 1 </div>

  <div class="item"> 2 </div>

  <div class="item"> 3 </div>

  <div class="item"> 4 </div>

  <div class="item"> 5 </div>

  <div class="item"> 6 </div>

  <div class="item"> 7 </div>

  <div class="item"> 8 </div>

  <div class="item"> 9 </div>

  <div class="item"> 10 </div>

  <div class="item"> 11 </div>

  <div class="item"> 12 </div>

  <div class="item"> 13 </div>

  <div class="item"> 14 </div>

  <div class="item"> 15 </div>

  <div class="item"> 16 </div>

  <div class="item"> 17 </div>

  <div class="item"> 18 </div>

  <div class="item"> 19 </div>

  <div class="item"> 20 </div>

  <div class="item"> 21 </div>

  <div class="item"> 22 </div>

  <div class="item"> 23 </div>

  <div class="item"> 24 </div>

  <div class="item"> 25 </div>

  <div class="item"> 26 </div>

  <div class="item"> 27 </div>

  <div class="item"> 28 </div>

  <div class="item"> 29 </div>

  <div class="item"> 30 </div>

</div>

这是一个用于说明结果的模板。

我不确定为什么底部图表中缺少一些块。

Answer 1

您的容器没有额外的高度。因此，该单元没有可用空间fr来分配。设置容器的高度（例如height: 100vh）。.grid-container {&nbsp; display: grid;&nbsp; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;&nbsp; grid-template-rows: 1fr 1fr 1fr 1fr 1fr;&nbsp; grid-gap: 5px;&nbsp; text-align: center;&nbsp; height: 100vh; /* new */}body {&nbsp; margin: 0;}<div class="grid-container">&nbsp; <div class="item"> 1 </div>&nbsp; <div class="item"> 2 </div>&nbsp; <div class="item"> 3 </div>&nbsp; <div class="item"> 4 </div>&nbsp; <div class="item"> 5 </div>&nbsp; <div class="item"> 6 </div>&nbsp; <div class="item"> 7 </div>&nbsp; <div class="item"> 8 </div>&nbsp; <div class="item"> 9 </div>&nbsp; <div class="item"> 10 </div>&nbsp; <div class="item"> 11 </div>&nbsp; <div class="item"> 12 </div>&nbsp; <div class="item"> 13 </div>&nbsp; <div class="item"> 14 </div>&nbsp; <div class="item"> 15 </div>&nbsp; <div class="item"> 16 </div>&nbsp; <div class="item"> 17 </div>&nbsp; <div class="item"> 18 </div>&nbsp; <div class="item"> 19 </div>&nbsp; <div class="item"> 20 </div>&nbsp; <div class="item"> 21 </div>&nbsp; <div class="item"> 22 </div>&nbsp; <div class="item"> 23 </div>&nbsp; <div class="item"> 24 </div>&nbsp; <div class="item"> 25 </div>&nbsp; <div class="item"> 26 </div>&nbsp; <div class="item"> 27 </div>&nbsp; <div class="item"> 28 </div>&nbsp; <div class="item"> 29 </div>&nbsp; <div class="item"> 30 </div></div>我不明白为什么这不起作用，因为这些fr单位正在使用grid-template-columns.默认情况下，块元素占用其父元素的整个宽度。所以你不需要定义width: 100%.身高则不然。大多数元素默认设置为其内容的高度 (&nbsp;height: auto)。因此，如果您希望容器比内容高，则需要定义高度。这就是为什么这些fr单位正在与 合作，grid-template-columns但没有grid-template-rows。