CSS中的fr含义

在CSS Grid Layout中，fr是一种新的单位，表示剩余空间的分数。它的全称为“fraction”，即分数的意思。

fr单位可以用于定义网格布局中的行高度和列宽度，它会自动根据可用空间进行调整。

fr单位的语法

grid-template-columns: 1fr 2fr 1fr;

上面的样式规则表示将父容器的宽度分为3部分，第一列和第三列各占据1部分，第二列占据2部分。

fr单位的使用场景

fr单位的使用场景可以分为以下两类：

1. 将网格轨道划分为固定和自适应的部分

.grid-container {
  display: grid;
  grid-template-columns: 100px 1fr;
}

上面的样式规则表示将父容器的宽度分为2部分，第一列宽度为100px，第二列的宽度自适应。

2. 将网格轨道划分为多个自适应的部分

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

上面的样式规则表示将父容器的宽度分为多个部分，每个部分的宽度均为自适应，且最小宽度为100px。如果剩余的空间足够，就将宽度自动调整为1fr。

总结

fr单位是CSS Grid Layout中的一个非常实用的新单位，可以非常方便地对网格布局进行调整。程序员可以根据不同的需求，灵活地运用它来实现各种各样的布局效果。