grid-template-columns 不支持小数 fr（如1.618fr），会导致整条声明被浏览器静默丢弃而回退为单列；应使用斐波那契整数比（如13fr 21fr）替代，并配合 minmax() 设置最小宽度以保障响应式体验。
grid-template-columns 不能写小数 fr，否则整条声明被浏览器静默丢弃——这是你布局突然变单列、比例完全失效的最常见原因。
为什么 1fr 1.618fr 会失效
浏览器解析 grid-template-columns 时，对 fr 值只接受整数或合法计算式（如 calc(1fr + 2px)），但 1.618fr 是非法字面量。它不是“精度不够”，而是语法错误，整条规则直接被忽略，回退到默认单列行为。
- 错误写法：
grid-template-columns: 1fr 1.618fr;→ 页面只剩一列 - 连
calc(1.618 * 1fr)也不行：Safari 和旧版 Chrome 对 calc 中浮点系数支持不稳定 - 百分比写法（如
61.8% 38.2%）在有gap或padding时会错位，且无法响应容器内边距变化
用斐波那契整数比替代黄金比例
取斐波那契数列中相邻两项，比如 13 和 21（21 ÷ 13 ≈ 1.615），误差仅 0.003；或更精确的 89 和 55（55 ÷ 89 ≈ 0.6179）。它们作为 fr 权重完全合法，视觉上几乎不可分辨。
- 两栏黄金分割（窄左宽右）：
grid-template-columns: 13fr 21fr; - 三栏（主–侧–次侧）：
grid-template-columns: 89fr 55fr 34fr;（相邻比均为 ≈1.618） - 注意：空格分隔即表示不同轨道，不要加单位后缀（如
13fr px）
给黄金比例加响应式安全边界
纯 fr 比例在小屏下可能把内容压得太窄（比如 13fr 列缩到 120px，文字挤成一团）。必须用 minmax() 设最小物理宽度。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
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控制关键容器高宽比，比靠列宽更可靠 - 真正影响“黄金感”的，是留白密度、字体缩放、图片裁剪一致性——这些比两个数字更难调，也更值得花时间
