因为定价表是二维结构，CSS Grid 天然支持行列双轴对齐，而 Flexbox 为一维布局，强行实现列对齐易错位、响应断裂；Grid 用 grid-template-areas 或 minmax() + auto-fit 可语义化、自适应地控制列宽与内容对齐。
为什么用 CSS Grid 而不是 Flexbox 做定价表列对齐
因为定价对比表本质是二维结构：既要控制行内项目（如“价格”“功能项”）的横向对齐，又要保证不同列之间（比如“基础版”“专业版”“企业版”）的垂直对齐——Flexbox 是一维布局，强行做列对齐得靠 min-height 或 JS 补齐高度，容易错位、响应时断裂。CSS Grid 天然支持行列双轴控制，grid-template-columns 定义列宽，grid-row 或隐式行轨道自动对齐同类型内容。
常见错误现象：display: flex + flex-wrap: wrap 后，各列“功能项”文字长度不一，导致同一行的勾号图标或禁用标记上下错开；媒体查询里反复重写 flex-basis，维护成本高。
- 使用场景：3–5 列横向对比、每列含标题/价格/功能列表/CTA 按钮
- 关键参数差异：
grid-template-rows: auto 1fr auto把功能列表设为弹性区域，避免内容撑高整列 - 兼容性注意：IE11 不支持
subgrid，但基础grid可用（需加-ms-前缀仅限简单布局）
如何用 grid-template-areas 实现语义化列对齐
比纯数字轨道更直观可控：把每列抽象成一个命名区域，让同类内容（如所有“价格”）落在同一命名行，自然对齐。
示例结构：
.pricing-grid {
display: grid;
grid-template-areas:
"header header header"
"price price price"
"features features features"
"cta cta cta";
grid-template-columns: 1fr 1fr 1fr;
}
每个定价卡片内部用 grid-area 标记对应区域：
<div class="plan basic"> <h3 class="plan-title" style="grid-area: header">基础版</h3> <div class="plan-price" style="grid-area: price">$9</div> <ul class="plan-features" style="grid-area: features">...</ul> <button class="plan-cta" style="grid-area: cta">立即开通</button> </div>
- 响应式断点只需改
grid-template-columns和grid-template-areas，例如小屏下改成"header" "price" "features" "cta"纵向堆叠 - 不要给
grid-area值加引号以外的空格，否则解析失败（如grid-area: "header "会失效） - 若某列缺失某区块（如企业版多一行“SLA 保障”），用
.占位保持区域网格完整
响应式断点中避免列宽坍缩的技巧
直接写 grid-template-columns: repeat(3, 1fr) 在小屏上会让每列过窄、文字换行混乱。应该用 minmax() + auto-fit 动态收缩，而非固定列数。
推荐写法：
.pricing-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
- 280px 是单列最小宽度（适配手机竖屏），超过则自动并列，最多填满容器 “功能列表”内容高度不一致时，加
- 慎用
grid-auto-flow: column—— 它会让内容按列填充，破坏“每行同类信息对齐”的前提
align-items: start 防止按钮被顶到不同高度
跨设备对齐细节：字体、间距与视觉节奏
Grid 解决了结构对齐，但真实体验还卡在像素级细节：不同列的 h3 字体大小一样，可基线却因字重/字高微差偏移；CTA 按钮高度随文字换行变化。
- 统一所有列标题的
line-height和font-size，禁用vertical-align（它对 Grid 子项无效） - 按钮固定高度：
min-height: 44px+display: flex+align-items: center，避免文字多行时按钮拉伸 - 功能列表用
grid-row: span 2显式声明占位（如果设计稿要求“无限功能”那行比其他行高一倍），比依赖内容撑开更可控
最易被忽略的是：当某列“已包含”功能项比其他列少时，Grid 默认不会拉齐空白行——必须用 grid-row-end 或显式定义 grid-template-rows 补齐轨道，否则视觉节奏断裂。这不是 bug，是 Grid 的轨道优先原则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
