CSS Grid 是一种优秀的区域布局工具，它能够帮助前端开发人员快速、简单地布局页面，提高开发效率。而 fr 单位就是在 CSS Grid 中的一个相对长度单位，它能够帮助我们更好地控制页面布局。在本文中，我们将深入探讨使用 fr 单位时需要注意的点。
fr 单位的介绍
fr (fraction) 单位是相对长度单位之一，它用来设置一个网格容器中轨道的剩余空间的比例。比如，如果一个轨道上设置了 1fr，而另一个轨道上设置了 2fr，那么这两个轨道的宽度比就为 1:2。
注意点
1. 不要过度使用 fr 单位
在使用 fr 单位时，我们需要注意不要过度使用。当我们把大量的轨道都设置为 fr 单位时，可能会出现页面无法充分利用空间的问题。因为 fr 单位会根据轨道的数量和值的大小来计算它们之间的比例，而这些比例可能不符合我们预期的布局，导致页面空间浪费。
2. 用非 fr 单位设置固定宽度的元素
如果一个固定宽度的元素使用 fr 单位来设置宽度，那么它的宽度将会被计算为 0。因此，我们应该使用非 fr 单位，如像素或百分比，来设置固定宽度的元素的宽度。
.item {
width: 100px;
/* 不要使用以下代码 */
width: 1fr;
}3. 设置不同方向上的 fr 单位
在一个网格容器中，如果我们需要设置不同方向上的 fr 单位，比如在水平方向上设置 1fr，在垂直方向上设置 2fr，那么我们需要使用 grid-template-rows 和 grid-template-columns 属性进行设置。下面的示例代码展示了如何设置不同方向上的 fr 单位。
.parent {
display: grid;
grid-template-rows: 1fr 2fr; /* 在垂直方向上设置 1:2 的比例 */
grid-template-columns: 1fr; /* 在水平方向上设置 1:1 的比例 */
}4. 使用 auto 关键字来填充空隙
当我们使用 fr 单位时，可能会出现两列或两行之间的空隙，这是由于 fr 把容器剩余空间按比例划分后产生的。为了填充这些空隙，我们可以使用 auto 关键字来让浏览器自动填充它们。下面的示例代码演示了如何使用 auto 关键字填充空隙。
-- -------------------- ---- ------- ------- - -------- ----- ---------------------- --- ---- -- -------- -- -- -- ---- ----- - ----- - ------- ------ -- ----------- -- ------------ - - -- -- ------------- -- ------------ ---- - ---- -- -
总结
在使用 CSS Grid 进行区域布局时，我们可以使用 fr 单位来设置轨道的比例。但是，我们需要注意不要过度使用 fr 单位，使用非 fr 单位来设置固定宽度的元素，使用 grid-template-rows 和 grid-template-columns 属性来设置不同方向上的 fr 单位，使用 auto 关键字来填充空隙。这样可以避免出现布局问题，提高页面的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d05a44b5eee0b525750e76