用 css grid 做三列卡片布局最省事：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 实现等宽、自动换行与高度对齐，配合 gap 和 align-self: start 确保响应式与可访问性。
用 CSS Grid 做三列卡片布局最省事
别碰 table，也别用 float 或 inline-block——价格订阅方案本质是「并列展示、各自独立」，不是行列强关联的二维数据。Grid 天然支持等宽、自动换行、高度对齐，写法干净且响应式可控。
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))是核心：最小宽度 300px，超出则自动均分剩余空间，小屏自然退为单列 - 必须加
gap: 1.5rem控制间距，别用margin，否则 Grid 轨道计算会偏移 - 每张卡片设
align-self: start，防止内容高度不一时被拉伸错位 - 避免给卡片设固定
height，它会让文字截断或按钮溢出；靠flex-column + space-between拉开标题与底部按钮即可
价格数字怎么突出又不失可访问性
用户第一眼扫的就是价格，但只放大字号或加粗远远不够——色弱用户可能看不出差异，读屏软件也可能漏掉单位和周期。
- 价格数字用
<span class="price">¥199</span>包裹，再加aria-label="每月 199 元"，确保语音朗读完整 - 单位（如“/月”）用
font-size: 0.6em+vertical-align: super上标，别用<sup></sup>标签——语义上它表示上标数学符号，不是价格单位 - 原价与促销价并排时，原价加
text-decoration: line-through，禁用灰色；灰色常低于 WCAG 4.5:1 对比度标准 - 字体启用等宽数字：CSS 加
font-feature-settings: "tnum"，让 “¥199” 和 “¥999” 的小数点真正对齐
移动端折叠推荐方案要避开 DOM 重排
手机屏窄，全列横向铺开会强制滚动，但直接隐藏某几列（比如只留“当前推荐”）会导致结构断裂、SEO 丢失、JS 维护成本飙升。
- 真要折叠，用
<details><summary>查看全部方案</summary><div class="card-grid">...</div></details>，语义清晰且自带可访问开关 - 不要在 JS 里用
innerHTML拼接卡片结构，容易 XSS；用document.createElement+textContent更安全 - 禁用
display: none切换整组卡片——它会让屏幕阅读器跳过内容，也影响搜索引擎抓取 - 如果必须默认只显示一列，用
@media (max-width: 768px)把卡片容器设为display: block，再用data-label提前存好方案名，小屏下用::before { content: attr(data-label) }补前缀
为什么不能用 div 模拟 table 做价格对比表
这不是“能不能做”的问题，而是“做了之后谁来买单”——可访问性、打印、导出 Excel、后期维护，每一项都会埋雷。
- 读屏软件无法识别“第2列是价格”，只会读成“盒子、盒子、盒子”，
scope="col"在div里完全无效 - Chrome 打印预览中，卡片可能跨页断开，标题和价格分在两页；
table有原生分页控制能力，div没有 - 用户复制表格内容到 Excel，
div布局大概率糊进 A1 单元格；而table可被正确解析为行列结构 - 哪怕你只是静态展示，也得考虑未来是否要加筛选、排序、导出功能——这些都依赖语义化结构，不是纯视觉能补救的
卡片布局适合订阅方案对比，是因为每个方案彼此独立；一旦需要横向逐项打钩（比如“是否含 SSL”“支持 API 数量”），就必须切回 table，别硬撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
