金融行情看板落地难点在于表头冻结、小数点对齐、图表容器响应和移动端touch响应四点：需分层设置sticky top值、用grid拆分金额整/小数部分、显式定义网格线定位图表、合理设置minmax最小宽度与gap。
直接用 grid-template-areas + repeat(auto-fit, minmax()) 搭配嵌套 Grid 是可行路径，但真正卡住落地的，是表头冻结、小数点对齐、图表容器响应和移动端 touch 响应这四点——没调好，看板在 iPad 上滑不动，在 PC 上数值列错位，上线当天就被业务方打回。
金融行情看板必须冻结多层表头，不能只设 top: 0
行情数据常含“市场 → 板块 → 个股”三级表头，只给第一行加 position: sticky; top: 0，第二行（比如“涨跌幅%”分组栏）会随滚动消失；全设 top: 0 又会叠在一起。
- 第一行表头（如“代码”“名称”“最新价”）设
top: 0 - 第二行表头（如“涨跌额”“涨跌幅”“成交量”）设
top: 48px（假设首行高 48px），确保吸附接续 - 整个表格容器必须有
overflow-y: auto，否则sticky在局部滚动里不生效 - 避免在表头单元格里用
flex或text-overflow: ellipsis，Safari iOS 16+ 对 sticky + flex 混合渲染有空白区 bug
金额列小数点对齐，text-align: right 不够用
单纯右对齐在“¥12,345.67”和“¥999.99”并存时，小数点无法垂直对齐；用 minmax(120px, 1fr) 又容易被长字段（如“融资融券标的-两融余额”）撑爆整列。
- 金额列容器加
min-width: 0+overflow: hidden，防文本溢出破坏轨道 - 内部再套一层
display: grid，列定义为grid-template-columns: 1fr max-content，把数字拆成“整数部分”和“小数部分”两个子项 - 整列用
justify-content: flex-end控制右对齐，单元格内仍保留text-align: right - 避免对金额列设
white-space: nowrap，否则小屏下直接横向滚动，遮挡操作按钮
图表容器在 Grid 中定位，别依赖视觉估算线号
把 K 线图、深度图、资金流向图钉在网格特定位置，靠“看着差不多”写 grid-column: 2 / 4 极易错位——Grid 线号从 1 开始计数，grid-column: 2 / 4 是跨第 2 和第 3 列，不是“第 2 到第 4 列”。
- 显式定义
grid-template-columns: 240px 1fr 300px后，再用整数线号定位，如grid-column: 2 / 3表示占中间列 - 用负值线号（如
grid-column: -2 / -1）锚定最右操作列，但需确认容器至少有 2 列，否则行为不可控 - 不要混用命名线（如
grid-column: sidebar-start / main-end）和数字线号，除非已用grid-template-areas显式声明这些命名 - 所有图表容器（
<canvas></canvas>、<svg></svg>）必须设touch-action: manipulation，否则 iOS Safari 默认禁用单指滑动
移动端卡片网格突然跳变，问题不在媒体查询而在 minmax() 取值
PC 端整齐，手机上一划就卡顿或点不中，90% 是因为卡片最小宽度设得太小或 gap 过大。硬写 @media (min-width: 768px) 覆盖列数，反而漏掉 iPad Pro 横屏（1024px）和 Surface Pro（1280px）这类中间尺寸。
- 默认用
repeat(auto-fit, minmax(280px, 1fr))，280px 是移动端单列卡片合理下限（含 padding + border），低于此文字挤团、图标点不中 -
gap: 1rem比gap: 2rem更安全，小屏下不会吃掉过多可用宽度 - 某张汇总卡片需跨列（如
grid-column: span 2），它只在当前断点生效，跨列行为不会继承到其他尺寸，得单独 media query 重设 - IE 不支持
auto-fit，若真要兼容，fallback 方案不是降级为 flex，而是用媒体查询 +repeat(3, 1fr)手动覆盖
真正难的不是写出能跑的 Grid 代码，而是当行情刷新触发某列内容突然换行（比如“北向资金净流入”变成两行）、或用户拖拽调整模块顺序后，整行高度被拉伸、相邻图表被挤变形——这时候，minmax() 的隐式轨道、align-items 的默认值、甚至 overflow 的层级穿透，都会成为排查黑洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
