使用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(数量, 轨道大小)
- grid-template-columns: repeat(3, 1fr); — 创建3列，每列等宽
- grid-template-rows: repeat(2, 100px); — 创建2行，每行高100px
- repeat(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等分布局变得直观又灵活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
