请解释 fr 单位在 CSS Grid 布局中的作用。

推荐答案

fr 单位是 CSS Grid 布局中一个非常强大的单位，代表的是可用空间的一部分。它可以帮助我们更灵活地分配网格容器内的剩余空间。

简单来说，1fr 就表示剩余可用空间的一份。如果多个网格轨道使用了 fr 单位，那么剩余空间会按照 fr 的比例进行分配。

例如，如果一个网格容器有三列，定义为 grid-template-columns: 1fr 2fr 1fr;，那么剩余空间会被分成 4 份 (1+2+1)，第一列和第三列各占 1/4 的空间，第二列占 2/4 的空间。

本题详细解读

fr 单位的概念

在 CSS Grid 布局中，我们使用 grid-template-columns 和 grid-template-rows 属性来定义网格轨道的大小。除了常见的 px、em、rem 等单位，还有一种特殊的单位 fr，它是 fractional unit (分数单位) 的缩写。

fr 单位表示网格容器剩余空间的 一部分。剩余空间是指网格容器在减去固定大小的轨道 (例如使用 px、em 等单位定义的轨道) 和网格间距后剩余的空间。

fr 单位的分配机制

• 比例分配: 当多个轨道都使用了 fr 单位时，剩余空间会按照 fr 单位的比例进行分配。 例如，grid-template-columns: 1fr 2fr 1fr; 会将剩余空间分成 4 份，第一列和第三列各占 1 份，第二列占 2 份。

• 与固定单位的混合使用: fr 单位可以与固定大小的单位（如 px、em 等）混合使用。浏览器会先计算固定大小的轨道，然后再将剩余空间分配给使用 fr 单位的轨道。例如，grid-template-columns: 100px 1fr 2fr; 会先固定第一列宽度为 100px，然后将剩余空间分成 3 份，第二列占 1 份，第三列占 2 份。

• 考虑 grid-gap: fr 单位计算剩余空间时会考虑网格间距(grid-gap 或者 column-gap，row-gap)。网格间距会从可用空间中扣除，然后剩余空间再被分配。

fr 单位的优势

• 响应式布局: fr 单位非常适合创建灵活的响应式布局。当容器大小改变时，fr 单位会自动调整轨道的大小以适应剩余空间。
• 避免复杂计算: 使用 fr 单位可以避免手动计算网格轨道的大小，特别是当布局涉及到多个可变尺寸的元素时。
• 更简洁的 CSS: fr 单位使 CSS 代码更加简洁，更易于维护。

示例

// www.javascriptcn.com code example
.grid-container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  grid-gap: 10px;
}

.grid-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

在这个示例中，第一列宽度固定为 100px，剩余空间会被分成 3 份，第二列占 1 份，第三列占 2 份。同时，grid-gap: 10px; 表示列与列之间有 10px 的间距，这个间距也会被考虑在 fr 单位的计算中。