核心是让每列实际占据相等可用空间且保最小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”“免费试用”等价格行。如果每个标题都写成独立 解决方法是让所有标题、价格、功能项都显式声明跨列范围： 对应 CSS： Grid 默认 正确做法是放弃拉伸，改为主动控制内容起始位置，并给统一最小高度防抖动： 虽然现在多数项目已放弃 IE，但如果必须兼容， 推荐写法： 真正难的不是写出三列对齐，而是让“对齐”这件事不依赖固定列数、不卡死最小宽度、不被内容长度带偏节奏——这些细节漏掉一个，小屏体验就断层。<div class="pricing-header">专业版</div>
<div class="pricing-price">¥199/月</div>
<div class="pricing-feature">支持 API 接入</div>
.pricing-header { grid-column: 1 / -1; }
.pricing-price { grid-column: 1 / -1; }
.pricing-feature { grid-column: 1 / -1; }
grid-column: 1 / 4 这类固定数字，它在列数变化时直接失效价格数字和按钮高度不一致？用
align-items: start + min-height 控制基线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 布局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)，语法冗余且易出错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
