Grid不等宽列核心是用不同系数fr组合与repeat()简化重复模式，fr按比例分配剩余空间而非固定宽度，需防内容撑开失效，配合minmax()可加弹性约束。
Grid网格布局中实现不等宽列，核心是灵活运用 repeat() 函数与不同数值的 fr 单位组合，而非强行写死像素值。关键在于理解 fr 是“剩余可用空间的份数”，不是固定宽度，多个 fr 之间按比例分配剩余空间。
用 repeat() 搭配混合 fr 值定义列轨道
你可以在 grid-template-columns 中直接写多个不同系数的 fr，repeat() 只是用来简化重复模式——它本身不强制等宽，只要括号里填的是非均匀值即可。
- 比如三列：左侧窄、中间宽、右侧适中 →
grid-template-columns: 1fr 2fr 1.5fr; - 想让第1列固定 120px，其余两列按 3:2 分配剩余空间 →
grid-template-columns: 120px 3fr 2fr; - 用
repeat()表达“两个 1fr 列 + 一个 2fr 列” →repeat(2, 1fr) 2fr，等价于1fr 1fr 2fr
避免常见误解：fr 不等于百分比，也不受内容撑开影响
fr 只参与“容器剩余空间”的分配，前提是所有列没有设置 min-width 或内容强制溢出。如果某列内容很长且未设置 min-width: 0 或 overflow，浏览器可能优先满足内容宽度，导致 fr 失效。
- 安全做法：给网格子项加
min-width: 0（尤其内含长文本或 flex 容器时） - 不要混用
fr和%在同一轨道定义中，逻辑易混乱；如需响应式，用minmax()+fr更可控
进阶技巧：用 minmax() 配合 fr 实现弹性+约束
纯 fr 有时太“软”，加一层最小/最大限制更实用。例如：“至少 100px，最多占满，但整体按比例分”：
grid-template-columns: minmax(100px, 2fr) minmax(150px, 3fr) 1fr;- 此时三列基础比例仍是 2:3:1，但各自有下限保护，不会被压缩到不可读
- 再结合
repeat(3, minmax(80px, 1fr)))就是“最多等宽，但至少 80px”，适合卡片列表
基本上就这些。不复杂但容易忽略细节：fr 是动态份额，repeat 是语法糖，真正决定不等宽的是你写的那些数字比例和约束条件。
