响应式价格卡片必须用Grid而非Flex，因其二维布局能精准控制行列对齐；推荐用minmax(300px,1fr)+auto-fit自动适配列数，并配合媒体查询分层设断点，卡片内部用grid-template-rows: auto 1fr auto确保高度一致。
Grid 布局中如何定义价格卡片的列数与断点
响应式 Pricing Table 的核心不是“让所有设备都显示三列”，而是按视口宽度分层控制列数。直接用 grid-template-columns: repeat(3, 1fr) 在小屏上会挤成一列重叠或横向溢出——这不是 Grid 自动适配，是没设断点。
推荐做法：用 minmax() + auto-fit 组合，配合媒体查询精细控制：
/* 默认移动端：单列 */
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
<p>/<em> 平板以上：最多 2 列，自动填充 </em>/
@media (min-width: 768px) {
.pricing-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}</p><p>/<em> 桌面端：固定 3 列，避免过宽卡片拉伸 </em>/
@media (min-width: 1024px) {
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
}
}-
minmax(300px, 1fr)表示每列最小 300px，最大均分剩余空间，防止小屏下卡片过窄 -
auto-fit会合并空余轨道，比auto-fill更适合内容不等长的 Pricing Card - 避免在
@media中重复写display: grid，只覆盖变化的属性
价格卡片内部如何用 Grid 对齐标题、功能列表和按钮
单张卡片内部若用 Flex 布局对齐价格、功能项、CTA 按钮，容易在不同卡片内容长度不一时导致高度错位——而 Pricing Table 要求所有卡片视觉高度一致（尤其并排时）。
解决方案：卡片自身设为 display: grid，用 grid-template-rows 显式划分区域：
立即学习“前端免费学习笔记（深入）”；
.pricing-card {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100%;
}
<p>.pricing-card h3 { grid-row: 1; }
.pricing-card .features { grid-row: 2; } /<em> 占满中间弹性区域 </em>/
.pricing-card .cta-button { grid-row: 3; }-
1fr用于功能列表区域，确保不同卡片的功能行数差异不影响整体高度对齐 - 必须给父容器（
.pricing-grid）加align-items: stretch（默认值），否则卡片不会撑高 - 如果某张卡片需要“推荐”角标，用
position: absolute配合grid-row: 1区域的相对定位更稳妥，避免破坏 Grid 流
如何处理“推荐”标签导致的布局偏移
常见错误是把 recommended 标签用 float 或 margin-top: -20px 强行上移，结果在不同屏幕宽度下偏移量失效，甚至盖住标题。
正确方式：利用 Grid 的层叠能力，在卡片内创建独立定位上下文：
.pricing-card {
position: relative;
}
<p>.recommended-tag {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
/<em> 不影响 grid 内部流式布局 </em>/
}- 绝对定位元素不参与 Grid 轨道计算，不会推挤其他内容
- 用
transform替代负 margin，避免因字体大小缩放导致偏移不准 - 确保
.recommended-tag的 z-index 高于卡片内容，但不要盲目设z-index: 999，通常z-index: 1足够
IE11 兼容性问题与降级策略
CSS Grid 在 IE11 中支持有限：grid-gap 不被识别，auto-fit 和 minmax() 完全无效，且 grid-template-areas 解析异常。强行加 @supports 检测反而增加复杂度。
务实做法：用 display: flex 作为 Grid 的降级方案，并通过 @supports 隔离 Grid 代码：
.pricing-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem; /* 现代浏览器生效 */
}
<p>@supports (display: grid) {
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem; /<em> Grid 下 gap 才真正生效 </em>/
}
}- Flex 降级时，用
flex-basis: calc(100% - 1.5rem)模拟单列，用媒体查询改flex-basis控制列数 - IE11 下
gap无效，需改用margin+:not(:last-child)伪类模拟间距 - 别试图让 IE11 实现完全一致的 Grid 效果——它连
subgrid都不支持，接受视觉微差比硬塞 hack 更可靠
实际项目里最常漏掉的是卡片高度一致性控制：很多人只设了外层 Grid 的 grid-template-columns，却忘了给卡片加 height: 100% 和父容器的 align-items: stretch，导致功能多的卡片明显更高。这个细节在设计稿里看不出来，一上线就露馅。
