使用fr单位可让CSS Grid子元素按比例分配空间。例如grid-template-columns: 1fr 2fr 1fr将容器分为1:2:1三列，中间占一半；fr可与px混合，如200px 1fr实现侧边栏+自适应主区；结合repeat(auto-fit, minmax(150px, 1fr))创建响应式卡片网格；用minmax(100px, 1fr)限制最小宽度同时保持比例，灵活应对不同屏幕尺寸。
在CSS Grid布局中，让子元素按比例分配空间是一个常见需求。通过使用fr单位和灵活轨道（flexible track），可以轻松实现自适应的网格结构。下面结合实际用法讲解如何高效控制子元素的空间分配。
fr单位：定义弹性比例空间
fr（fraction）单位表示可用空间的一个比例部分。它只作用于剩余空间，适合创建等分或按比例划分的布局。
例如，将容器分为三列，比例为1:2:1：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
这会把容器划分为4个“份数”，中间列占一半宽度，两侧各占1/4。
混合使用固定尺寸与fr单位
fr单位可与其他单位（如px、%）混合使用。Grid会先扣除固定尺寸的空间，再将剩余部分按fr分配。
比如左侧固定200px，右侧占据剩余空间：
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
}
这种写法常用于侧边栏+主内容区的布局，无需额外计算宽度。
PicDoc
AI文本转视觉工具，1秒生成可视化信息图
6214 查看详情
minmax()与repeat()增强灵活性
结合minmax()和repeat()可以让网格更智能地响应内容变化。
例如创建一个每列至少150px、最多1fr的响应式网格：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
浏览器会自动计算能容纳多少个至少150px的列，并均匀分配剩余空间。内容少时拉伸，内容多时换行，非常适合卡片布局。
控制轨道最大最小尺寸
有时需要限制fr分配的极端情况。可以用minmax()包裹fr值来设定范围：
.grid-container {
display: grid;
grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
}
这样即使空间不足，第一列也不会小于100px，第二列不会小于200px，同时保持比例关系。
基本上就这些。熟练掌握fr单位和灵活轨道函数，就能应对大多数比例布局场景，写出简洁且响应式的Grid代码。
以上就是Grid布局中子元素如何按比例分配空间_flexible track与fr单位实战的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/993147.html
微信扫一扫 
支付宝扫一扫 
