必须用 CSS Grid 实现价格对比表：首列用 max-content 或固定宽防换行错位，其余列用 1fr；移动端单列、平板 auto-fit(minmax(280px,1fr))、桌面端 repeat(3,1fr)；禁用 border 混用，统一用 gap 和边框模拟表格；保持 grid-auto-flow: row 确保阅读逻辑。
直接用 CSS Grid，别碰 Flex 或 table —— 否则对齐错位、响应断裂、维护崩溃是必然结果。
grid-template-columns 必须显式定义首列宽度
价格对比表的纵向是指标（如“月费”“存储”“支持”），首列文字长度不一。若设 grid-template-columns: 1fr 1fr 1fr，一旦“技术支持”换行，整行被撑高，后续所有价格数字的垂直基线就偏移了——这不是视觉误差，是网格轨道实际变高，1fr 的计算基准已失效。
- 首列固定用
max-content（推荐）或120px，防换行、保对齐 - 其余价格列统一用
1fr，保证等宽且随容器弹性伸缩 - 绝对不要给首列写
1fr，否则“邮箱数”和“技术支持”行高差异会直接撕裂视觉对比链
用 minmax() + auto-fit 实现真正可用的列数切换
写死 repeat(3, 1fr) 在手机上只会把三列硬塞进窄屏，文字挤成“¥…/月”；用 auto-fill 又会在内容少时留大片空白轨道。正确解法是分层控制：
- 移动端默认单列：
grid-template-columns: max-content 1fr（指标名 + 当前版本） - 平板起（≥768px）：
repeat(auto-fit, minmax(280px, 1fr))，280px是保障价格数字可读、按钮可点的底线 - 桌面端（≥1024px）：
repeat(3, 1fr)，避免卡片过宽拉伸失衡 -
auto-fit会自动合并空轨道，不是“隐藏”，是真不渲染——这点比auto-fill关键得多
gap 和 border 别混用，否则出现双倍粗线
Grid 没有 border-collapse。如果每个单元格都加 border: 1px solid #ddd，再配 gap: 16px，视觉上就是「1px 边框 + 16px 空白 + 1px 边框」，像两条线夹着缝，非常割裂。
立即学习“前端免费学习笔记（深入）”；
- 统一用容器外边框：
border: 1px solid #e0e0e0 - 首行单元格加
border-bottom，首列单元格加border-right，模拟表格分隔线 - 或者彻底放弃边框，改用
gap: 16px+ 偶数行background: #f9f9f9 - 别在单元格上同时写
padding和依赖gap控制间距——padding影响内容尺寸，容易溢出
grid-auto-flow 必须保持 row（默认值）
价格对比的阅读逻辑是“先看同一行里的不同版本”，比如横向扫完“基础版/专业版/旗舰版”的价格，再往下看“存储”。一旦设 grid-auto-flow: column，Grid 会先填满“基础版”整列（价格→存储→支持），再填“专业版”，DOM 顺序变成“价格-基础版”“存储-基础版”“支持-基础版”“价格-专业版”……对比关系彻底打散。
- 保持默认
grid-auto-flow: row，无需显式声明 - 若需小屏横向滚动，用
overflow-x: auto包裹容器，而不是靠grid-auto-flow: column - 禁用
grid-row/grid-column手动定位每个格子——列数一变就崩，响应式根本没法维护
最易被忽略的其实是首列宽度和 auto-fit 的组合：它看着简单，但一旦漏掉 max-content 或误用 auto-fill，整个对比逻辑就从第一行开始错位。这不是样式问题，是布局语义的失效。
