核心是让每列实际占据相等可用空间且保最小300px宽，用auto-fit+minmax实现响应式；标题/价格/功能需grid-column:1/-1跨整行对齐；align-items:start+min-height保障视觉一致性；IE兼容用@supports回退flex。
用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 实现等宽自适应列
响应式价格表单对比的核心不是“让列看起来一样宽”，而是让每列在不同屏幕下**实际占据相等的可用空间**，同时保持最小可读宽度。直接写 grid-template-columns: 1fr 1fr 1fr 在小屏上会把三列强行挤在一起，文字换行混乱、按钮被压扁——这不是响应式，是硬塞。
真正可靠的做法是结合 auto-fit 和 minmax()：
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
-
minmax(300px, 1fr)表示：每列至少 300px 宽（保障内容可读），最多均分剩余空间 -
auto-fit会让浏览器自动“合并空余轨道”——比如屏幕只剩 500px 宽，就只显示一列；宽到 900px，就铺开三列 - 别用
auto-fill，它会保留空轨道，导致列数固定但内容被拉伸变形
表头与数据单元格必须用 grid-column: 1 / -1 跨列对齐
价格表里常有“基础版”“专业版”“旗舰版”这类标题，还有“每月 ¥99”“免费试用”等价格行。如果每个标题都写成独立 <div> 放进 Grid，它们默认按顺序填入轨道，一旦列数变化，标题就错位——比如小屏下“专业版”标题跑到第二行，和价格数据不对应。
<p>解决方法是让所有标题、价格、功能项都显式声明跨列范围：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<pre class='brush:php;toolbar:false;'><div class="pricing-header">专业版</div>
<div class="pricing-price">¥199/月</div>
<div class="pricing-feature">支持 API 接入</div></pre>
<p>对应 CSS：</p>
<pre class='brush:php;toolbar:false;'>.pricing-header { grid-column: 1 / -1; }
.pricing-price { grid-column: 1 / -1; }
.pricing-feature { grid-column: 1 / -1; }</pre>
<ul>
<li>这样无论当前是 1 列还是 3 列，每个区块都横跨整行，视觉对齐不依赖列数</li>
<li>注意不要用 <code>grid-column: 1 / 4 这类固定数字，它在列数变化时直接失效
价格数字和按钮高度不一致？用 align-items: start + min-height 控制基线
Grid 默认 align-items: stretch，导致“¥99/月”短文本的容器被拉高，而“立即开通”按钮在另一列里因文字多、行数多，反而显得矮——结果就是价格数字和按钮底部不对齐，视觉割裂。
正确做法是放弃拉伸，改为主动控制内容起始位置，并给统一最小高度防抖动：
.pricing-card {
display: grid;
align-items: start;
min-height: 320px;
}
-
align-items: start让所有子元素顶部对齐，消除因内容行数差异导致的错位 -
min-height是关键：防止某列内容特别少（比如只有标题）时卡片塌缩，破坏整体节奏 - 按钮本身加
margin-top: auto可让它自动沉底，比靠flex嵌套更轻量
IE 不支持 auto-fit？用 @supports 回退到 flex 布局
虽然现在多数项目已放弃 IE，但如果必须兼容，repeat(auto-fit, ...) 在 IE 中完全无效，整个 Grid 会退化为单列或崩坏。不能靠 JS 检测 UA，要用 CSS 原生能力做渐进增强。
推荐写法：
.pricing-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
@supports (display: grid) {
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
}
- 先写
flex版本作为兜底：它天然支持换行，也能实现基本响应式 -
@supports确保只有支持 Grid 的浏览器才覆盖为 Grid 布局 - 别用
@supports not (display: grid)，语法冗余且易出错
真正难的不是写出三列对齐，而是让“对齐”这件事不依赖固定列数、不卡死最小宽度、不被内容长度带偏节奏——这些细节漏掉一个，小屏体验就断层。
