grid-template-columns: max-content 1fr 是价格对比表首列固定的关键，因 max-content 自适应最长指标名防换行，避免整行被撑高导致后续列 1fr 计算基准偏移；若设 1fr 则“存储”“支持”行高差异会破坏垂直对齐。
直接用 grid-template-columns 配 minmax() + 媒体查询分层控制列数，是唯一能兼顾可读性、对齐精度和维护性的做法；硬写 repeat(3, 1fr) 或依赖 auto-fill 在小屏必然错位或留白。
为什么 grid-template-columns 必须显式定义首列宽度
价格对比表的横向是「版本维度」（基础版/专业版/旗舰版），纵向是「指标维度」（价格/存储/支持）。首列（指标名）若不固定，文字一换行就会拉高整行，导致所有价格数字垂直错位——这不是视觉问题，是网格轨道被撑开后，后续列的 1fr 计算基准已变。
- 首列推荐
max-content（自动适应最长指标名）或固定120px，避免换行 - 其余价格列统一用
1fr等分，保证宽度一致 - 绝对不要给首列设
1fr，否则“存储”和“支持”两行高度差异会直接破坏对齐
如何用 minmax() + auto-fit 实现真正可用的响应式列数
写死 repeat(3, 1fr) 在手机上会强行三列，文字挤成一团；用 auto-fill 又会保留空轨道，内容少时底部大片空白。正确解法是：
- 移动端默认单列：
grid-template-columns: max-content 1fr（指标名+单个版本） - 平板起用
repeat(auto-fit, minmax(280px, 1fr))，其中280px是保障价格数字和按钮可点击的最小宽度 -
auto-fit会合并空轨道，宽度只够放一列时就真只渲染一列，不是“隐藏” - 桌面端切回
repeat(3, 1fr)，避免卡片过宽拉伸
如何避免 gap 和边框叠加出双倍粗线
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: column 会导致价格顺序错乱
价格对比表必须按「行优先」填充：先填完「价格」行的所有版本，再填「存储」行。一旦设 grid-auto-flow: column，Grid 会先填满「基础版」列（价格→存储→支持），再填「专业版」列，结果 DOM 顺序变成「价格-基础版」「存储-基础版」「支持-基础版」「价格-专业版」……完全打乱对比逻辑。
- 保持默认
grid-auto-flow: row（无需显式声明） - 需要横向滚动时，用
overflow-x: auto包裹容器，而不是靠改变填充方向 - 跨行标题（如「立即购买」按钮）必须用
grid-column: 1 / -1，不能写span 3——列数一变就失效
最易被忽略的是 Safari 对 1fr 的解析保守性：在 flex 容器里嵌套 Grid，或混用固定宽和 minmax() 时，它常把 1fr 当固定值处理。加一句 width: 100% 或 max-width: 100vw 能帮它锚定计算上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
