CSS fr 含义

CSS fr 是 CSS Grid Layout 新增的相对长度单位，表示父元素的可用空间。在这篇文章中，我们将介绍 CSS fr 的用法、语法和示例。

用法

使用 CSS fr 可以用来设置网格布局中的列和行的大小。fr 表示可用空间的一部分，其值与网格容器中所有的 fr 的总和成比例。例如，一个容器中的两列，其中一列的宽度为 1fr，另一列的宽度为 2fr，则第二列的宽度将是第一列的两倍。

语法

CSS fr 使用与其他长度单位类似的语法，只需要在数值后面加上 fr。例如，将某个网格项目的宽度设置为网格容器宽度的一半，可以使用以下代码：

grid-column: 1 / span 2;
width: 1fr;

示例

下面是一个简单的示例，展示了如何使用 CSS fr 来创建网格布局：

<div class="grid-container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  height: 200px;
}

.item {
  background-color: #ccc;
  padding: 20px;
}

.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.item-2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.item-3 {
  grid-column: 2;
  grid-row: 2 / span 2;
}

.item-4 {
  grid-column: 1;
  grid-row: 3;
}

可以看到，我们使用 grid-template-columns: 1fr 1fr 1fr; 定义了一个 3 列的网格布局，并在 grid-container 上设置了高度。在各个网格项目中，我们定义了它们应该占据的行和列。

结论

CSS fr 是 CSS Grid Layout 中一个非常有用的新增特性。使用它，我们可以更灵活、更直观地设置网格布局中的各个元素的大小和位置。