Grid CSS fr 内容宽度

概述

在 CSS Grid 中，fr 是一个单位，代表的是剩余空间的一部分。它可以用来设置 Grid 容器中的列或行的大小。使用 fr 单位可以更轻松地创建具有弹性的列或行，而无需指定确切的像素或百分比。

语法

grid-template-columns: 1fr 1fr 1fr;

在上面的代码中，将 Grid 容器的列设置为三个等宽的列，每个列的宽度都是 1fr。如果我们将 fr 分配给不同的列，则它们将根据其分配的值自动调整其大小。

示例

以下示例演示了如何使用 fr 单位来创建具有灵活宽度的列：

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

第一个列的宽度为 2 个 fr 单位，而其他两个列宽度分别是 1 个 fr 单位。这意味着第一个列将比其他两个列宽两倍。如果我们需要添加更多的列，则可以继续添加 fr 单位。

兼容性

fr 单位是 CSS Grid 中的相对新功能，因此可能不受所有浏览器的支持。请参阅以下的表格，了解 fr 单位的浏览器兼容性：

| Chrome | Firefox | Safari | IE / Edge | Opera | | ------ | ------- | ------ | --------- | ----- | | 57 | 52 | 10.1 | 16 | 44 |

总结

在 CSS Grid 中，使用 fr 单位可以更轻松地创建具有灵活宽度的列或行。它易于使用并且代码可读性强，因此多数现代浏览器都支持使用它。在设计网格布局时，建议使用 fr 单位来创建具有弹性和可扩展性的列和行。