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

乔丹·尼克松

我无法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>

这是说明结果的模板。

我不确定为什么下图缺少一些块。

我对CSS网格的期望

迈克尔·本杰明

您的容器没有多余的高度。因此，该fr单元没有可用空间来分配。

设置容器的高度（例如height: 100vh）。

.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;
  height: 100vh; /* new */
}

body {
  margin: 0;
}

<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>