F2.02.3column-gutter-margin ratio设计
三者的比例关系比绝对值更重要
别名: 栏槽边比 · 相对间距 · proportional inset
概念解释
列宽、槽宽、外边距三个数单独看都「合理」，叠在一起却能反转结构。常见事故：外边距 24、槽 8。页与屏幕之间呼吸很大，列与列之间几乎没有缝——两列先黏成一块，整块内容再像一张小卡片漂在窗口里。绝对值抄对了手机稿，比例在桌面或平板上翻了。
这条管的是三者之间谁更大，不是把槽或边各自再讲一遍。
机制
视觉分组读的是相对差。槽相对列宽决定列还能否被看成独立流；外边距相对列宽决定整块内容相对窗口有没有框；槽相对外边距决定「先切开列」还是「先把整页从窗口里抬起来」。
把手机上的 16 / 16 / 16 原样搬到 1440 宽窗口，列变得很宽，槽和边相对列变成发丝，多栏会糊，内容又顶到窗口边。只放大外边距、槽仍 8，则出现开头那种倒置：边框感强、分栏感弱。所以要锁的是比例带（例如外边距 ≥ 槽，槽大约是列宽的一个小分数），让绝对像素跟着宽度走。
边界
极窄宽度上三个数都会撞上最小值（触控、字号、安全区），比例必然变形，这时保的是可读和可点，而不是桌面那套比。印刷栅格的经典比也不能当屏幕公式：屏幕有滚动和动态字号，列宽在断点之间还会连续变。
只有一列时，槽不存在，比例退化成「列宽 : 外边距」。仍要看外边距会不会大过列本身——那是把内容放逐到窗口中央的另一种形式。
怎么落地
- 在 375 和 1440 两个宽度上量同一模块的列宽、槽、外边距，写成比。若桌面出现「边 ≥ 列」或「槽小到看不出、边却很大」，就是比例翻转。
- 用一套随宽度缩放的规则生成这三个数（分数或 clamp），而不是三张静态标注。
- 验证：把两个宽度的截图并排，遮住数字只看结构。问「先看到分栏还是先看到页漂在窗口里」。若两个宽度答案相反，记下翻转发生在哪一段宽度，把那一段的生成规则改到比例不再倒置。