直接使用1.618fr是错误的，因为CSS的fr单位不支持小数，会导致整条声明被忽略；应采用斐波那契相邻整数比（如13fr 21fr）近似黄金比例，误差小于0.003。
直接用 grid-template-columns 写 1fr 1.618fr 是错的——浏览器不认小数 fr 值，会忽略整条声明。
黄金比例不能直接写成小数 fr 单位
CSS 的 fr 单位只接受整数或计算表达式（如 calc(1fr + 2px)），但不支持 1.618fr 这类浮点字面量。尝试这样写会导致整个 grid-template-columns 失效，回退到默认单列布局。
- 错误示例：
grid-template-columns: 1fr 1.618fr;→ 浏览器静默丢弃该行 - 正确思路：用整数比近似黄金比例，比如
8fr 13fr（13/8 = 1.625）、13fr 21fr（21/13 ≈ 1.615） - 斐波那契相邻项是最稳妥的整数逼近方式，误差小于 0.003
用整数 fr 比模拟黄金比例的实际写法
取斐波那契数列中相邻两项，按顺序分配给列宽，就能在视觉上逼近黄金分割。例如左侧窄区、右侧宽区，可用 13fr 21fr：
.golden-layout {
display: grid;
grid-template-columns: 13fr 21fr;
gap: 1rem;
}-
13fr 21fr总份数 34，窄列占 ≈38.2%，宽列占 ≈61.8% —— 正是黄金比例的典型分割（1:φ） - 若需反转（宽左窄右），写成
21fr 13fr即可 - 注意：不要加单位后缀（如
13fr px），空格分隔即表示不同列
响应式下保持黄金比例的陷阱
在媒体查询中直接改 grid-template-columns 容易破坏比例连续性。比如从 13fr 21fr 切换到 1fr 1fr，不是平滑过渡，而是突变。
立即学习“前端免费学习笔记（深入）”；
- 避免在断点里硬切比例，优先用
minmax()+repeat()控制列数变化，而非强行维持固定比例 - 若必须响应式黄金比，建议用 JS 动态设置 CSS 变量，再通过
calc(var(--a) * 1fr) calc(var(--b) * 1fr)计算（但需注意 Safari 对 calc 中变量的支持延迟） - 移动端通常不需要严格黄金比，优先保证内容可读性；黄金比例更适合固定宽度的仪表盘、画廊或封面布局
真正难的不是算出 13 和 21，而是意识到：黄金比例在 UI 中从来不是数学精度问题，而是视觉节奏问题。用整数 fr 模拟只是手段，留白、字体缩放、内容密度这些才是影响“黄金感”的关键变量。
