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 是语法糖,真正决定不等宽的是你写的那些数字比例和约束条件。










