CSS Grid 属性中的 fr 是一种相对单位，它代表了网格容器的可用空间的一部分。在网格布局中使用 CSS Grid 属性的 fr 可以让我们更加方便地进行布局，实现高度灵活的自适应页面设计。
什么是 CSS Grid 属性中的 fr？
CSS Grid 属性中的 fr 是一个相对单位，它表示了网格容器可用空间的一部分。
在使用 CSS Grid 属性布局时，我们可以设置网格容器的宽度和高度，也可以使用 fr 单位来设置行和列的大小。例如：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}在这个例子中，我们使用 grid-template-columns 属性来设置了网格容器的列，其中 1fr 和 2fr 的比例是 1:2，也就是说，第一列和第三列的宽度都是第二列宽度的一半。这意味着，无论容器的宽度如何变化，每一列的大小都会相应地调整，并自适应容器的宽度。
如何使用 CSS Grid 属性中的 fr？
在使用 CSS Grid 属性时，我们可以使用 fr 来定义网格容器内元素的大小，并设置它们之间的比例关系。fr 可以用于定义列宽、行高以及网格中的间隔。
定义列宽
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}在这个例子中，我们使用 grid-template-columns 属性来定义网格容器的列，其中 1fr 和 2fr 的比例是 1:2，并将容器分成了三个相等的部分。
定义行高
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr 1fr;
}与定义列宽类似，这个例子中使用 grid-template-rows 属性来定义行的高度，其中 1fr 和 2fr 的比例是 1:2。
定义间隔
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}在这个例子中，我们使用 grid-gap 属性来定义网格容器中行与行、列与列之间的距离。这里的距离是 20px。
CSS Grid 属性中的 fr 的指导意义
CSS Grid 属性中的 fr 确实是一种非常灵活的相对单位。通过在网格布局中使用它，我们可以非常便利地为我们的页面制作自适应布局。
但是，如果我们没有充分理解 fr 的含义，也可能会造成布局上的困难和不必要的麻烦。因此，在使用 fr 时，我们需要考虑以下几个要点：
- 对于需要快速制作应用程序的开发者，使用固定宽度单位可能更方便。
- 在使用 fr 时，我们需要精确地定义比例和宽度，以确保布局的正确性。
- fr 中的值本身是相对于网格容器的可用空间大小，在不同的屏幕上可能会有不同的大小。
示例代码
下面是一个使用 fr 的示例代码。我们将网格容器分成三个相等的部分，使它们在各种屏幕尺寸下都能良好地自适应布局。
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ---------- - ----------------- ----- ------ ----- -------- ----- ----------- ------- ---------- ----- -
<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> </div>
// JavaScript 动态计算 fr 值
const gridItems = document.querySelectorAll('.grid-item');
const gridColumnCount = document.querySelector('.grid-container').childElementCount;
gridItems.forEach(elem => {
elem.style.height = `calc((100vh - ${60 + gridColumnCount * 20}px) / ${gridColumnCount})`;
});在这个例子中，我们先定义了一个网格容器，将其分成了三列，每列的宽度比例是 1:1:1。然后，我们使用了 grid-gap 属性来定义行与行之间的间隔。接着，我们定义了网格中的每一个项目，设置了它们的背景颜色、文字颜色以及内边距。最后，利用 JavaScript 动态计算了内容高度以充分利用所有可用空间。
总结
CSS Grid 属性中的 fr 是一种非常灵活的相对单位，在使用网格布局时十分有用。通过设置正确的比例和宽度，我们可以轻松地为页面制作出自适应布局。但在使用 fr 时，我们需要注意一些尺寸的细节，并根据需要选择是否使用固定宽度单位。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f54f92f6b2d6eab3e0434e