5g fr1 fr2_第2部分：Fr（动作）是什么？

在Debugging CSS Grid系列的第二部分中，我们将研究fr （或分数 ）单位。 Fr单元对于确定网格轨迹的尺寸非常有用，并且大大简化了构建响应式布局的过程。 但是，如果您不了解它们的工作方式，可能会遇到一两种意外行为。 本文旨在揭开这些神秘的面纱。

介绍

fr单位是Grid专用的新单位。 它允许您根据网格容器中可用空间的比例来调整网格轨道的大小。 通过使用fr单位而不是百分比来实现灵活的布局，我们可以避免混乱而复杂的calc（）函数来调整网格轨迹的大小。 作为一个简单的示例，我们可以创建四个等宽列：

.grid{
     
	display: grid ;
	grid-template-columns:repeat( 4 , 1fr );
	column-gap: 20px ;
}

图01四个等宽轨道（每个大小为1fr）

网格考虑了每个列轨道之间的20px间隙，并将剩余空间平均分配。 您还可以将其与固定轨道一起使用：