了解CSS中的FR单位：一个输入，它会自动计算布局分割，并调整网格内的间隙。

分数——或分数单位——是改变生活的。为什么？因为它们是最灵活和响应的单位！可惜它们只存在于网格内。

一个分数或1FR是整体的一部分。1个分数是可用空间的100％。2个分数分别为50％。因此，1FR是可用空间的1/2。如果有250个分数呢？那么每个分数（1FR）就是1/250或0.4％。

因此，1个分数就是1（或100）除以总分数的数量。我们将在下面进一步探讨这个问题。

它是2个分数！

无论您要使用分数还是百分比，您首先需要做的是：

例如，您有四列。您希望它们的大小相等，并填充可用空间。您可以将每个列设置为100/4=25％宽度。

每个宽度为25％的4列填满了100％的网格容器。

但是，如果以后您决定使其中一列的大小是其他列的两倍呢？（2X+X+X+X=100，X是多少？）

如果将其中一列的宽度更改为50％，则列将溢出网格容器。您需要重新计算宽度值，并再次更改每列的大小。

如果需要添加另一列怎么办？现在有五列需要总计100。因此，每个都需要100/5=20％。如果您不希望发生溢出，则需要更新每列的值。

5列宽度为25％将溢出网格容器。您需要将每列调整为20％宽。

如果需要删除一列怎么办？或添加间隙？您明白了吧？使用百分比时，每次需要添加或删除列、更改其大小、添加间隙或更改间隙大小时，您都需要：

同样，您有四列。您希望它们的大小相等。

每个具有1FR大小值的列都会拉伸以填充可用空间。

如果您希望其中一个比其他列大两倍怎么办？

2FR等于2个分数。因此，1FR的值是1除以总分数（2FR+1FR+1FR+1FR=5FR）。因此，每个1FR=可用空间的1/5或20％。因此，2FR宽度为2/5或40％。

现在您有4列，但总共有5个FR，因此自动每个分数占据可用空间的20％。因此，第一列占用了2个分数的空间，即40％。您无需进行任何计算或更新每列的大小。

如果添加或删除一列怎么办？您什么都不做！分数自动工作！

在这里，我们删除了宽度为2个分数的第一列。现在，总分数为3。因此，每个1FR宽的列现在拉伸为空间的1/3。

在示例中：

只要内容是灵活的，分数单位就是整体的一部分。这意味着，只要内部内容可以缩放以适应列或行，1FR跟踪就是相等的。然而，一旦内容停止缩放以适应跟踪，具有FR值的跟踪将调整以使内容适合。因此，如果一列具有固定宽度的网格子项，则该列的宽度永远不会小于网格子项的宽度。

因此，宽度为1FR的列具有与内容宽度相等的最小值，无论该宽度是像400px这样的设置固定单位，还是文本元素中最长的单词。

但是，网格中的其他列会发生什么？它们将按比例缩小。为什么？嗯，这是发生的情况：

其他三列每个占用剩余空间的1个分数。这是剩余空间的33.33％。

FR自动设置最小值，以尊重内部的内容。因此，使用FR时，最小值是自动的（或自动），最大值是我们设置的值（1FR，2FR..）

因此，从技术上讲，1FR是min/max（auto，1FR），意味着min=auto，max=1FR。

现在，您当然可以通过将尺寸设置从默认值更改为min/max来覆盖此最小值。最大值将是1FR，最小值可以是您指定的任何值。但是，请注意，任何超过此处设置的最小宽度的固定宽度的跟踪内的内容将溢出网格单元。

您可以在min/max设置中为跟踪的最小和最大尺寸指定任何值。具有min/max值的跟踪将大于或等于最小值，并小于或等于最大值。

例如，默认情况下，行的高度为auto。这允许它根据内部的内容扩展或缩小。将min/max值设置为行是创建灵活行的绝佳方法，不会缩小到设置的最小值以下。假设您希望有一行的高度至少为5VH，但不希望内部的任何内容溢出该行或被裁剪。您需要做的就是将行大小设置为min=5VH，max=auto。