CSS Grid 中的网格单位 fr，你了解吗？
CSS Grid 是一个新的布局系统，它允许我们一次性定义一个完整的网格布局，并且让元素之间更容易地对齐、分布和调整。在 CSS Grid 中，网格可以被定义为固定尺寸，百分比，自动，minmax，以及最近引入的一种新的网格单位 fr。那么，什么是 fr 单位呢？在本文中，我们将深入了解 fr 单位，以及如何使用它来创建更加灵活的网格布局。
什么是 fr 单位？
fr 是 CSS Grid 中的一个新的单位，它代表着网格容器（grid container）中可用空间的一部分。它是一个相对单位，类似于百分比，但是使用 fr 时，它是基于网格容器的可用空间大小来计算的，而不是基于元素父容器的大小。总之，fr 的含义就是 “剩余空间的部分”。
示例代码：
--------------- - -------- ----- ---------------------- --- --- ---- -
在上面的示例代码中，网格容器的宽度被分成三个等分，其中每个 fr 占据了剩余空间的一部分。第一个和最后一个项目分别占据了一个 fr 的空间，中间的项目占据了两个 fr 的空间。这意味着中间项目的宽度是第一个和最后一个项目的宽度的两倍。
如何使用 fr 单位？
- 进行比例分配
通过使用 fr 单位，我们可以为元素分配相对空间的比例，而无需设置具体的像素尺寸。以一个三列的网格系统为例：
--------------- - -------- ----- ---------------------- --- --- ---- -
在这个三列的网格系统中，第一列和第三列宽度相等，占据整个宽度的 1/4 ，而第二列的宽度占据剩余的 2/4。如果我们将比例修改为 2:1:1，那么代码如下：
--------------- - -------- ----- ---------------------- --- --- ---- -
- 设置最小或最大值
fr 单位还可以与 minmax() 函数一起使用，以设置元素的最小/最大宽度。
--------------- - -------- ----- ---------------------- --- ------------- ----- -
在上面的示例代码中，第二列的宽度总是至少为 200px，但如果剩余空间大于 200px，则它将占据整个剩余空间，直到极限为止。
总结
fr 是一种极其实用的 CSS Grid 单位。它为网格布局提供了极大的灵活性和精度，使得我们能够更加方便地控制项目的大小和位置。通过如上学习，我们不难发现，CSS Grid 布局虽然强大，但也不难掌握，优美的网格布局离我们并不遥远，行动起来吧！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64900f8a48841e9894e37e72