CSS 网格布局：Fr 单位

介绍

Fr 是 CSS 网格布局中的一个全新的单位，表示网格容器中的可用空间，用于分配行或列的宽度或高度。它是 CSS Grid Layout Level 1 中引入的。Fr 单位的值是一个数字，代表网格容器中剩余空间的分数。例如，一个 2fr 的元素将占据可用空间的一半，如果有三个相等大小的元素，每个元素都将占据剩余空间的三分之一。

使用Fr 单位的好处之一是可以更轻松地设计响应式网格布局。当网格容器的大小发生变化时，Fr 单位会自动分配空间，实现自适应设计。

语法

要使用 Fr 单位，只需要在容器的 grid-template-rows 或 grid-template-columns 属性中指定一个 Fr 值即可。例如：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 将可用空间分成三等分，然后将中间部分的空间分成两等分 */
}

上述代码将可用空间分为三份，第一列和第三列各占据一份，第二列占据两份。注意，Fr 值可以与其他单位一起使用，例如像素或百分比。

示例

以下示例演示了如何使用 Fr 单位：

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
</div>

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  height: 300px;
}

.item {
  background-color: #eee;
  border: 1px solid #333;
}

.item1 {
  grid-column: 1 / 2;
}

.item2 {
  grid-column: 2 / 3;
}

.item3 {
  grid-column: 3 / 4;
}

该示例中，三个元素都基于 Fr 值进行布局，第二个元素占据了更多的空间。屏幕尺寸变化时，它们会自适应地适应容器的大小。

总结

Fr 单位是 CSS 网格布局中的一个强大的工具，它使响应式网格设计更加灵活。通过在容器的 grid-template-rows 或 grid-template-columns 属性中使用 Fr 值，我们可以非常方便地控制元素之间的间距和布局。

要了解更多有关 CSS 网格布局的内容，请查看 CSS Grid Layout。