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单位。
PicDoc
AI文本转视觉工具，1秒生成可视化信息图
6214 查看详情 
比如：
.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单位与比例分配技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/989275.html
微信扫一扫 
支付宝扫一扫 
