grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是唯一真正可用的响应式价格表列生成方式，因 auto-fit 能自动合并空轨道、minmax 保障最小可读宽度与弹性分配，配合 grid-column: 1 / -1 和 align-items: start 可避免错位。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能实现真正可用的响应式价格表，不需要 JS、不用写多个媒体查询断点，但必须配合 grid-column: 1 / -1 和 align-items: start 才不会错位。
为什么 auto-fit + minmax 是唯一靠谱的列生成方式
写死 1fr 1fr 1fr 或用 auto-fill 都会出问题：前者在小屏强行三列导致文字挤成一团、按钮被压扁；后者保留空轨道，在内容少时下方留大片空白。
-
minmax(280px, 1fr)表示每列至少 280px（保障可读性），最多均分剩余空间 -
auto-fit会让浏览器自动合并空轨道——宽度只够放一列时，就真只渲染一列 - 别设
grid-auto-flow: column，默认row才符合“每张卡从上到下”的阅读流 - 如果某列功能项超长，加
min-width: 0防止 Grid 忽略minmax的最小约束
标题、价格、功能项必须跨整行对齐
否则列数变化时，“专业版”标题可能跑到第二行，和它下面的价格、功能脱节。这不是视觉错位，是 DOM 顺序和网格轨道错配。
- 所有同类区块（如所有
.pricing-title）都加grid-column: 1 / -1 - 绝对不要用
grid-column: 1 / 3这类固定数字，列数一变就全乱 - 如果用
grid-template-areas，小屏断点只需改grid-template-areas值为"header" "price" "features" "cta"，不用动 HTML -
grid-area值里不能有额外空格，grid-area: "header "会失效
卡片内部高度不一致？别靠 align-items: stretch
Grid 默认 align-items: stretch 看起来等高，但一旦卡片内有 min-height、height 或 Safari 下的弹性容器，就会失效，底部按钮飘移。
立即学习“前端免费学习笔记（深入）”；
- 更稳的解法：卡片根元素设
display: flex; flex-direction: column; - 把价格区域设为
flex: none，功能列表设flex: 1，CTA 按钮加margin-top: auto推到底部 - 避免在卡片里写
height: 100%——父容器没显式高度时，Safari 常计算失败 - 如果必须用 Grid 控制内部，用
grid-template-rows: auto 1fr auto auto，其中1fr给功能列表
Safari 列宽不准？不是 bug，是 fr 计算上下文丢失
Safari 对 1fr 的解析比 Chrome 保守，尤其在 flex 容器里嵌套 Grid，或混用固定宽和 minmax 时，容易把 1fr 当固定值处理。
- 给 Grid 容器加
width: 100%或max-width: 100vw，帮 Safari 锚定计算上下文 - 避免在同一
grid-template-columns里混用minmax(280px, 1fr)和200px—— Safari 会优先满足固定列，压缩弹性列 -
gap改用clamp(1rem, 4vw, 2rem)，减少 Safari 对总宽度估算误差 - IE11 完全不支持
fr和auto-fit，用@supports not (display: grid)降级为 Flexbox，别硬塞 fallback
真正难的不是写对那几行 CSS，而是理解 minmax 控制的是轨道弹性范围，auto-fit 决定是否渲染空轨道，以及 grid-column: 1 / -1 是语义对齐而非视觉居中——这三者缺一，响应式价格表就只是“看起来能缩放”，而不是“在任何尺寸下都可用”。
