CSS Grid 是一种强大的前端布局技术，它可以让我们轻松地创建复杂布局、根据视口大小调整网格布局、实现响应式设计等等。其中一个特别有用的单位是 fr，它可以帮助我们更好地控制网格布局的大小和位置。本文将详细介绍 fr 单位的用法和技巧。
1. 什么是 fr 单位？
fr 是 CSS Grid 中的一种单位，它代表了可用空间中的一份比例。当把 fr 分配给多个项目时，它们会按照它们的比例占据可用空间的大小，例如，当一个项目有 1fr 的大小，另一个项目有 2fr 的大小时，第二个项目的大小将是第一个项目大小的两倍。
2. 如何使用 fr 单位？
使用 fr 单位非常简单。我们可以在 grid-template-columns 和 grid-template-rows 属性中使用它。下面是一个示例：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
}这将创建一个有两列的网格布局。第一列占据可用空间的 1/3，而第二列占据可用空间的 2/3。
3. fr 单位的优势
使用 fr 单位有一些重要的优点，包括：
3.1. 它使得响应式设计更容易
使用 fr 单位可以使得网格布局在不同的屏幕尺寸下都能够很好地工作。例如，我们可以使用以下代码来创建一个简单的响应式网格布局：
-- -------------------- ---- -------
--------------- -
-------- -----
---------------------- --- --- ----
-
------ ------ --- ----------- ------ -
--------------- -
---------------------- ----
-
-在小于 600 像素的屏幕上，该布局将变为一列。
3.2. 它可以避免使用百分比
与其使用百分比来控制网格布局的大小，我们可以使用 fr 单位。这样，我们可以更简单、更高效地创建复杂布局。
3.3. 它可以让我们更精确地控制网格布局的大小和位置
使用 fr 单位可以让我们更精确、更细致地控制网格布局的大小和位置，而不必担心其他元素的影响。
4. fr 单位的技巧
使用 fr 单位时，有一些小技巧可以让我们更好地掌控网格布局的大小和位置。
4.1. 在 grid-template-columns 或 grid-template-rows 中使用 minmax()
在 grid-template-columns 或 grid-template-rows 中使用 minmax() 函数可以确保项目不会过分缩小或过分放大。例如：
.grid-container {
display: grid;
grid-template-columns: 1fr minmax(100px, 2fr) 1fr;
}在这个例子中，第二个项目的大小将在 100 像素和剩余可用空间的 2/3 之间动态调整。
4.2. 将所有 fr 单位加总
当把 fr 分配给多个项目时，确保在 grid-template-columns 或 grid-template-rows 中所有 fr 的值之和为 1。这样可以确保所有可用的空间都被利用。
4.3. 使用 grid-gap 属性
使用 grid-gap 属性可以在项目之间添加空隙，从而使布局更具可读性和美观度。例如：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- --------- ----- - ---------- - ----------------- ----- -------- ----- -
5. 示例代码
最后，以下是一个简单的网格布局示例，演示了如何使用 fr 单位来创建动态的布局。
<div class="grid-container"> <div class="grid-item item-1">Item 1</div> <div class="grid-item item-2">Item 2</div> <div class="grid-item item-3">Item 3</div> <div class="grid-item item-4">Item 4</div> <div class="grid-item item-5">Item 5</div> <div class="grid-item item-6">Item 6</div> </div>
-- -------------------- ---- -------
--------------- -
-------- -----
---------------------- --- --- ----
------------------- --------- -----
--------- -----
-
---------- -
----------------- -----
-------- -----
----------- -------
-
------- -
------------ - - --
--------- - - --
-
------- -
------------ --
--------- - - --
-
------ ------ --- ----------- ------ -
--------------- -
---------------------- ----
------------------- --------- -----
-
------- -
------------ --
--------- --
-
------- -
------------ --
--------- --
-
------- -
------------ --
--------- --
-
------- -
------------ --
--------- --
-
------- -
------------ --
--------- --
-
------- -
------------ --
--------- --
-
-在这个例子中，我们创建了一个带有两行和三列的网格布局，左侧的列占据可用空间的 1/4，右侧的列占据可用空间的 3/4。通过媒体查询，我们在较小的屏幕上将布局变为一列，每个项目占据整个可用空间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c9a856e46428fe9e163365
