<p>结论：别用1.618fr或calc(1fr * 1.618)，浏览器会静默丢弃整条声明导致单列；应改用斐波那契整数比（如13fr 21fr）并配合minmax()限定最小宽度，移动端优先堆叠或用aspect-ratio控制视觉比例。</p>
直接说结论：别硬套 1.618fr，它根本不会生效——浏览器会静默丢弃整条 grid-template-columns 声明，页面瞬间退化成单列。
grid-template-columns 写小数 fr 就失效？
不是精度问题，是语法错误。1.618fr 不是合法的 CSS 字面量，所有主流浏览器（Chrome、Firefox、Safari）都会整条规则跳过，不报错、不警告，只默默回退到默认单列行为。你看到的“布局崩了”，大概率就是这个原因。
连 calc(1.618 * 1fr) 也不可靠：Safari 和旧版 Chrome 对 calc 中浮点系数解析不稳定，部分版本直接忽略。
-
grid-template-columns: 1fr 1.618fr;→ 白屏或单列（实际是规则被丢弃） -
grid-template-columns: calc(1fr * 1.618) 1fr;→ Safari 15.6 及更早版本可能不识别 - 百分比写法如
61.8% 38.2%在有gap或父容器 padding 时，总宽会超 100%，导致换行或横向滚动
用斐波那契整数比替代黄金比例
取相邻斐波那契数作为 fr 权重，既合法又足够精确。例如：
立即学习“前端免费学习笔记（深入）”；
- 两栏（窄左宽右）：
grid-template-columns: 13fr 21fr;（21 ÷ 13 ≈ 1.615，误差仅 0.003） - 三栏（主–侧–次侧）：
grid-template-columns: 89fr 55fr 34fr;（55 ÷ 89 ≈ 0.6179，89 ÷ 55 ≈ 1.6182） - 注意：空格分隔即表示不同轨道；
13fr后不能加单位，比如13fr px是非法的
必须加 minmax() 设最小物理宽度
纯 fr 比例在小屏下会把内容压得极窄，比如 13fr 列缩到 120px，文字挤成一团，可读性归零。
正确写法：grid-template-columns: minmax(320px, 13fr) minmax(200px, 21fr);
错误写法：minmax(13fr, 1fr) —— fr 不能当 minmax() 的最小值参数，会整个声明失效。
另外，gap 是额外占用空间的，计算比例时已隐含扣除；若需显式控制总宽，用 calc(100% - gap) 配合 flex 或 aspect-ratio 更稳妥。
移动端别硬套黄金比例
竖屏手机上死守 13fr 21fr，往往导致主内容区过窄、行高崩坏、触摸目标太小。黄金比例是视觉节奏工具，不是数学枷锁。
建议方案：
- 优先堆叠：
@media (max-width: 768px) { grid-template-columns: 1fr; } - 真需要比例感，改用
aspect-ratio: 1.618 / 1控制关键容器（如封面图、卡片）高宽比，比靠列宽更可靠 - 真正影响“黄金感”的，是留白密度、字体缩放、图片裁剪一致性——这些比两个数字更难调，也更值得花时间
