用 display: grid + repeat(auto-fit, minmax(300px, 1fr))) 实现响应式三列定价卡片，小屏自动退为单列；禁用写死三列、避免 margin 控制间距、确保 box-sizing: border-box。
直接用 display: grid + repeat(auto-fit, minmax(300px, 1fr))) 就能稳稳撑起三列定价卡片，且在小屏自动退化为单列——关键不是“强行塞三列”，而是让 Grid 自己按内容宽度决定列数。
为什么不能写死 grid-template-columns: 1fr 1fr 1fr
写死三列会导致小屏下卡片被压缩、文字挤成一团、按钮错位。Grid 不会自动换行或隐藏，它只会把三列硬塞进窄容器里。真正该做的是告诉 Grid：“每张卡片至少要 300px 宽，最多占满一列，能放几列就放几列”。
-
minmax(300px, 1fr)表示：单列最小 300px，大屏下可弹性拉伸 -
auto-fit会让空轨道收缩，剩余空间均分给有内容的列；auto-fill则保留空轨道，一般不用 - 必须配合
gap控制间距，别用margin——否则在auto-fit下可能触发意外换行或塌陷
align-items: stretch 和高度不一致的问题
默认 align-items: stretch 会让所有卡片拉高到同一高度，但前提是它们没设 height 或 max-height。一旦某张卡片内容多（比如多了个功能列表），它就会撑高整行，其他卡片跟着变高——这反而是合理行为。
- 如果想禁止拉伸，改用
align-items: start，但要注意按钮、价格等元素可能上下不对齐 - 若需底部对齐（如“立即购买”按钮统一贴底），得在卡片内部用
display: flex; flex-direction: column; justify-content: space-between - 别在卡片上设
height: 100%，它不会继承网格行高，反而常导致内容溢出
居中整个卡片组，而不是单张卡片
“三列居中布局”的核心是让三列卡片整体在页面水平居中，不是每张卡片自己居中。错误做法是给每张卡片加 margin: 0 auto ——Grid 项不响应这个。
- 正确方式：父容器设
max-width: 1200px+margin: 0 auto，再配display: grid - 如果卡片总宽不足容器宽，
justify-content: center可以让整组卡片居中（但通常不需要，因为max-width+automargin 已足够） - 避免在父容器上同时用
text-align: center和justify-content: center，前者对 Grid 无效，还可能干扰内联文本
最易被忽略的一点：别忘了给卡片本身设 box-sizing: border-box。加上 padding 或 border 后，若没这句，卡片实际宽度会超 300px，minmax() 就会失效，小屏下照样挤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
