价格对比表应设 grid-auto-flow: row（默认），grid-template-columns 显式定义列宽（首列 max-content/120px，其余 fr），grid-template-rows 用 minmax(40px, auto) 或 auto；禁用 grid-row/column 手动定位，响应式时用媒体查询切换列数并配 overflow-x: auto。
grid-template-columns 和 grid-template-rows 怎么配才不乱？
价格对比表本质是「列对齐、行分组」的二维结构，横向（列）控制商品维度（如「基础版」「专业版」「旗舰版」），纵向（行）控制指标维度（如「价格」「存储」「支持」）。grid-template-columns 必须显式定义每列宽度，否则自动列宽会导致价格数字右对齐错位；grid-template-rows 建议用 auto 或 minmax()，避免固定高度截断文字。
- 列宽优先用
fr等分，但首列（指标名）建议设为max-content或固定120px，防止文字换行拉高整行 - 行高别写死
40px，改用minmax(40px, auto)，兼容多行描述 - 如果某行要跨所有价格列（比如「立即购买」按钮），得用
grid-column: 1 / -1，不是span 3——后者在列数变动时会失效
grid-auto-flow: column 会导致价格列顺序错乱吗？
会。默认 grid-auto-flow: row 按行填充，符合「先列后行」的阅读习惯；一旦改成 column，Grid 会先填满第一列再填第二列，价格单元格就会按「指标1-基础版」「指标2-基础版」「指标1-专业版」排列，完全打乱对比逻辑。
- 价格对比表必须保持
grid-auto-flow: row（默认值，可不写） - 若真需要横向滚动（比如手机端），用
overflow-x: auto包裹容器，而不是靠grid-auto-flow: column - 不要用
grid-row/grid-column手动定位每个格子——维护成本高，且响应式时极易崩
gap 和 border-collapse 冲突导致边框双倍粗？
是的。gap 是网格间隙，而表格思维下的「合并边框」在 Grid 里不存在。如果给每个单元格加 border: 1px solid #ddd，再设 gap: 16px，视觉上就是「边框 + 空白 + 边框」，看起来像 2px 线+16px 缝，非常割裂。
- 统一边框只画「外侧」和「分隔线」：给容器设
border: 1px solid #e0e0e0，首行/首列单元格加border-bottom/border-right - 或者彻底放弃边框，用
gap: 16px+ 背景色区分（比如偶数行background: #f9f9f9） - 别在单元格上同时用
padding和gap模拟间距——padding 影响内容尺寸，gap 才是布局间距，混用易溢出
手机端横向滚动时，grid-template-columns 失效怎么办？
常见现象：PC 上用 grid-template-columns: 120px 1fr 1fr 1fr，到手机端直接挤成一列或文字重叠。问题不在 Grid，而在列定义没做响应式切换。
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询重置
grid-template-columns：小屏下改为grid-template-columns: 1fr，再配合grid-auto-flow: column让指标垂直堆叠（这时才安全） - 首列（指标名）加
grid-row: span 1，其余价格列用grid-row: span 1保证单行显示 - 容器必须设
overflow-x: auto且white-space: nowrap防止内部换行破坏滚动
横向属性（列定义）管的是「有多少档价格」，纵向属性（行定义）管的是「比哪些项」——这两者在代码里必须严格分离，不能靠视觉猜测对齐。最容易被忽略的是：当新增一档价格时，只改 grid-template-columns 不够，还得同步检查所有 grid-column 的起止位置是否越界。
