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