fr单位是CSS Grid实现等宽多列最直接可靠的方式，通过grid-template-columns配合repeat()或混搭固定值与minmax()，可灵活实现等宽、响应式及自适应布局。
用 fr 单位是 CSS Grid 实现等宽多列最直接、最可靠的方式。
用 grid-template-columns 配合多个 1fr
每列写一个 1fr，Grid 会自动均分可用空间。例如三等宽列：
container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
更简洁写法（推荐）：
grid-template-columns: repeat(3, 1fr);
四列、五列同理，改数字即可，无需计算百分比或像素值。
立即学习“前端免费学习笔记（深入）”；
混搭固定列与等宽列时仍保持“等宽”语义
想让中间几列等宽，左右加固定宽度侧边栏？fr 依然适用：
grid-template-columns: 200px 1fr 1fr 1fr 200px;
中间三列会平分剩余空间，彼此严格等宽，不受两侧固定值影响。
也可用 minmax() 防止过窄：
grid-template-columns: 200px repeat(3, minmax(0, 1fr))) 200px;
响应式中动态调整列数，fr 配合 auto-fit 更灵活
避免为不同屏幕写多个 repeat(n, 1fr)？用 auto-fit + minmax() 自动适配：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))));
浏览器会在容器内尽可能放入最小宽度 250px 的列，超出则换行，每列仍保持等宽（因都用 1fr）。
注意：别混淆 fr 和 % 或 flex 的行为
fr 是 Grid 特有单位，按**剩余空间比例分配**，不是父容器总宽的百分比；
- 两列
1fr 2fr→ 占剩余空间的 1/3 和 2/3 - 三列
1fr 1fr 1fr→ 各占 1/3，真正等宽 - 不用考虑
gap占用——Grid 会自动从总宽中扣除间隙再分配
