使用fr单位和repeat()函数可轻松实现CSS Grid等分布局。fr表示可用空间的比例份额，如1fr 1fr 1fr将容器三等分；repeat(3, 1fr)简化重复轨道定义；repeat(auto-fit, minmax(100px, 1fr))实现自适应列数且等宽；常用于三等分布局、响应式卡片网格及等高侧边栏布局，兼具简洁性与灵活性。
在CSS Grid布局中，实现等分布局是常见需求，比如让多个子元素均匀占满容器。通过使用fractional units（fr单位）和repeat()函数，可以非常简洁高效地完成这一目标。
什么是fr单位？
fr是“fraction”的缩写，表示网格容器中可用空间的一个比例份额。它类似于弹性布局中的“份数”概念。
例如，将三列设置为1fr 1fr 1fr，它们将平分容器的宽度，每列各占三分之一。
与百分比不同的是，fr单位会自动处理间距和剩余空间，尤其适合响应式设计。
立即学习“前端免费学习笔记（深入）”；
使用repeat()简化重复轨道定义
当需要创建多个等宽或等高的列/行时，手动写多个fr值很繁琐。CSS提供了repeat()函数来简化语法。
基本语法：repeat(数量, 轨道大小)
博思AIPPT
博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。
117 查看详情 grid-template-columns: repeat(3, 1fr); — 创建3列，每列等宽grid-template-rows: repeat(2, 100px); — 创建2行，每行高100pxrepeat(auto-fit, minmax(100px, 1fr)) — 自适应列数，每列最小100px，最大1fr
实用等分布局示例
下面是一些常见的等分布局写法：
三等分水平布局：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
自适应卡片网格（最小150px，最多等分）：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
}
这种方式能在小屏幕上自动变为单列，大屏幕上显示多列，且始终保持等宽。
等高侧边栏+主内容（两列）：
.layout {
display: grid;
grid-template-columns: 1fr 3fr; /* 左窄右宽 */
}
基本上就这些。fr单位配合repeat()，让Grid等分布局变得直观又灵活。
以上就是如何在CSS中实现Grid等分布局_fractional units与repeat技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/960550.html
微信扫一扫 
支付宝扫一扫 
