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

【问题标题】：Why won't fr units work with grid-template-rows on CSS grid?为什么 fr 单位不能与 CSS 网格上的 grid-template-rows 一起使用？
【发布时间】：2020-04-01 01:14:05
【问题描述】：

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

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

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

【问题讨论】：

这将使您更好地了解fr 单元的工作原理https://alligator.io/css/css-grid-layout-fr-unit/。您所拥有的似乎可以正常工作。在.item 周围加个边框，看看我的意思。
嗨，我还是不明白。我了解您引用的信息，但即使使用 fr 单独或混合值，我仍然不明白为什么行无法识别 fr 值但列会。
fr 单位可用于网格行和网格列值。它代表“可用空间的一部分”。当您取消固定大小和基于内容的列/行时，可以将其视为可用空间的百分比。正如规范所说： 小数空间的分布发生在所有“长度”或基于内容的行和列大小都达到最大值之后。 source。这些行正在识别 fr 值。
你用的是什么浏览器？如果它已经过时，这可以解释为什么它不起作用。
Chrome 的最新版本（版本 80.0.3987.149）。

标签： html css css-grid

【解决方案1】：

您的容器没有额外的高度。因此，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>

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

默认情况下，块元素会占用其父元素的整个宽度。所以你不需要定义width: 100%。

身高不是这样。大多数元素默认设置为其内容的高度 (height: auto)。因此，如果您希望容器高于内容，则需要定义一个高度。

这就是为什么fr 单位使用grid-template-columns 而不是grid-template-rows。

【讨论】：

啊！非常感谢，这解释得很完美。我不知道高度被设置为内容。我以为它会被设置为视口，这就是我如此困惑的原因。