Grid布局用auto-fit与minmax(280px,1fr)实现三栏定价卡响应式：移动端堆叠、平板双列、桌面三列且高度自适应；flex无法行对齐，table语义错误且不支持gap。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) + grid-template-areas 组合，就能让三栏定价卡在移动端自动堆叠、平板双列、桌面三列且内容高度自适应——不需要写多个媒体查询，也不用 JS 计算。
为什么不用 flex 或 table 布局
flex 做横向对比表格时，flex-wrap 无法保证各列“行对齐”：某张卡的 .feature-list 多两行，整列就会被拉高，其他卡对应位置的标题或按钮就错位；table 语义错误（这不是数据表格）、display: table-cell 不支持 gap、无法跨断点重排结构。Grid 的二维控制能力在这里是刚需。
auto-fit 与 minmax(280px, 1fr) 的实际表现
这个组合决定了卡片宽度的弹性边界和换行逻辑：
-
minmax(280px, 1fr)表示每张卡最小占 280px（保障文字可读+按钮点击区），最大等分剩余空间 -
auto-fit会让空余列自动收缩，已有卡片拉伸填满整行；而auto-fill会保留空白轨道，导致右侧大片留白 - 当容器宽度
- 注意：IE 不支持
auto-fit，如需兼容，必须退回到@media+ 固定repeat(3, 1fr)
用 grid-template-areas 对齐关键区块
定价卡通常含标题、价格、功能列表、CTA 按钮四部分，靠 grid-column 手动定位容易错乱。推荐用命名区域统一约束：
立即学习“前端免费学习笔记（深入）”；
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.pricing-card {
display: grid;
grid-template-areas:
"header"
"price"
"features"
"cta";
row-gap: 16px;
}
.pricing-card h3 { grid-area: header; }
.pricing-card .price { grid-area: price; }
.pricing-card .features { grid-area: features; }
.pricing-card .cta-btn { grid-area: cta; }
这样即使某张卡的 .features 高度突增，也不会影响其他卡的 .price 垂直位置——因为每张卡是独立子网格，区域定义互不干扰。
动态高度下的视觉陷阱与修复
所有卡片都设 height: 100% 或 align-items: stretch 是常见错误，会导致短卡被强行撑高、底部留白难看。正确做法是：
- 卡片容器不设固定高度，让内容自然撑开
- 用
justify-content: start确保顶部元素始终贴顶 - CTA 按钮加
margin-top: auto推到底部，避免浮动错位 - 功能列表项用
display: flex; align-items: center替代vertical-align: middle，防止文字基线不齐 - 测试时重点看「最长卡」和「最短卡」并排时，各区块是否仍保持视觉对齐（尤其价格数字的 baseline）
真正难调的不是列数切换，而是当某张卡因文案增减突然变高时，相邻卡的按钮是否还处在同一水平线——这取决于你是否把对齐逻辑从“外部容器”下沉到了每张卡内部的 grid-template-areas 控制中。
