使用 fr 单位可创建灵活网格布局，.grid-container { display: grid; grid-template-columns: 1fr 2fr; } 将容器按比例分为两列，第一列占 1/3，第二列占 2/3；fr 可与 px、rem 等固定单位混合使用，如 150px 1fr 2fr，实现侧边栏与内容区布局；等分列可用 repeat(3, 1fr) 简写；fr 分配的是扣除固定列后的剩余空间，容器宽 800px 时 200px 1fr 1fr 的两个弹性列各占 300px；合理使用 fr 能提升响应式布局效率。
CSS 的 grid-template-columns 配合 fr 单位是创建灵活网格布局的核心方法。fr（fraction）代表“份数”，它将容器的可用空间按比例划分给各个网格列，自动适应容器大小，无需手动计算像素值。
理解 fr 单位的基本用法
fr 表示一个可伸缩的网格轨道，其大小是根据剩余可用空间来分配的。比如：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
}
上面的代码表示：容器被分为两列，第一列占 1 份，第二列占 2 份，总共 3 份。因此第一列占容器宽度的 1/3，第二列占 2/3。
混合使用 fr 与其他单位
你可以将 fr 与固定单位（如 px、rem）结合使用，实现更复杂的布局。
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
grid-template-columns: 150px 1fr 2fr;
}
这里第一列固定为 150px，剩余空间被分成 3 份（1 + 2），第一弹性列占 1/3 剩余空间，第二列占 2/3。适合侧边栏+主内容+侧边内容的布局。
等分列的简洁写法
想让所有列等宽？可以用 fr 快速实现：
Revid AI
AI短视频生成平台
96 查看详情 
.grid-container {
grid-template-columns: 1fr 1fr 1fr;
}
三列各占 1/3 宽度。也可以简写为：
grid-template-columns: repeat(3, 1fr);
这种写法更清晰，尤其在列数较多时非常实用。
注意可用空间的计算方式
fr 分配的是剩余空间。如果某列设为固定宽度，其他 fr 列将在扣除该宽度后分配剩余空间。
例如：
grid-template-columns: 200px 1fr 1fr;
容器宽 800px，则剩余 600px 被两个 fr 列平分，每列 300px。
基本上就这些。合理使用 fr 能让你的网格布局自动适应不同屏幕尺寸，减少媒体查询的依赖，提升开发效率。关键在于理解“份数”如何瓜分可用空间。
以上就是如何通过css grid-template-columns与fr单位分配比例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1036619.html
微信扫一扫 
支付宝扫一扫 
