Grid布局中fraction单位如何使用_fr单位与比例分配技巧

fr单位按比例分配网格容器中的剩余空间，1fr 2fr表示两列分别占1/3和2/3；可与px、%混合使用，如100px 1fr 2fr中fr分配扣除固定宽度后的空间；结合minmax()可设置最小宽度和弹性上限，如minmax(200px, 2fr)；通过repeat()可简化重复轨道定义，如repeat(3, 1fr)创建三等分列，实现灵活响应式布局。

在CSS Grid布局中，fr单位（fraction unit）是用于分配容器中可用空间的核心工具。它不表示固定长度，而是代表“一份”可用空间的比例。当你希望网格轨道（行或列）按比例分配剩余空间时，fr单位非常实用。

fr单位的基本用法

fr单位定义的是网格容器中剩余空间的分数。比如，将网格列设为 1fr 2fr，意味着总共有3份，第一列占1/3，第二列占2/3。

示例：

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

这会创建两列，第二列宽度是第一列的两倍。浏览器会自动计算每一份对应的实际像素值，取决于容器宽度。

混合使用fr与固定单位

fr单位可以和px、%等其他单位一起使用。当存在固定宽度轨道时，fr只分配减去固定部分后的剩余空间。

例如：

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

这里第一列宽100px，剩下的宽度被分为3份：中间列占1份，右边列占2份。也就是说，中间列获得剩余空间的1/3，右边列获得2/3。

minmax()与fr结合实现弹性布局

为了防止内容溢出或网格塌陷，可以结合 minmax() 函数使用fr单位。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

比如：

.container {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 2fr) 1fr;
}

中间列最小为200px，最大可扩展到总可用空间中2份的宽度。这种写法适合创建既响应式又具备最小尺寸保障的布局。

重复模式与repeat()函数

当需要多个等分列时，可以用 repeat() 简化书写。

例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

等同于写 1fr 1fr 1fr，创建三个等宽列。也可用于复杂模式：

grid-template-columns: repeat(2, 100px 1fr);

生成：100px + 1fr + 100px + 1fr。

基本上就这些。fr单位的核心在于按比例切分剩余空间，配合固定单位和函数使用，能构建高度灵活的网格布局。理解其分配逻辑后，响应式设计会变得更直观。

以上就是Grid布局中fraction单位如何使用_fr单位与比例分配技巧的详细内容，更多请关注php中文网其它相关文章！