用 css grid 实现车型配置对比表格，首列固定宽度、车型列自适应，命名线提升可维护性，响应式支持横向滚动与单列展开，并保障语义化和无障碍访问。
在 H5 页面中用 CSS Grid 实现车型配置对比表格，核心是把“车型列”和“配置项行”作为网格的两个维度，让每个单元格精准对齐，同时兼顾响应式与语义化。不推荐用 table 标签硬套，Grid 更灵活、结构更清晰、适配移动端也更可控。
结构设计：语义化 HTML 搭配 Grid 容器
先用语义化标签组织内容：外层 <section class="car-compare"></section> 为 Grid 容器；首列为配置项名称（如“车身长度”“续航里程”），用 <dl></dl> 或带 role="rowgroup" 的 <div> 区分；每款车型为一列，用 <code><div class="car-col"> 包裹配置值。避免嵌套表格，确保屏幕阅读器可读。
<h3>Grid 列/行定义：固定首列 + 自适应车型列</h3>
<p>关键在 <code>grid-template-columns 和 grid-template-rows 的配合：
- 首列（配置项名称）设为固定宽度，如
140px或minmax(120px, auto) - 后续车型列用
repeat(auto-fit, minmax(200px, 1fr)))，自动适配屏幕宽度，最小 200px，超出则换行（配合grid-auto-flow: column可横向滚动） - 行高由内容撑开，或统一设
grid-auto-rows: minmax(56px, auto)保证基础高度一致
单元格定位：用 grid-row / grid-column 精准控制
配置项名称（左侧标题）设 grid-column: 1；每款车的对应配置值按顺序设 grid-column: 2 / 3、grid-column: 3 / 4 等。更推荐用命名线方式提升可维护性：
- 定义列名：
grid-template-columns: [start] 140px [car-start] repeat(3, [car] 1fr) [end]; - 配置项标题：
grid-column: start / car-start; - 第 1 款车第 n 行值：
grid-column: car-start / car; grid-row: n;
响应式与体验优化
小屏下横向空间不足时，优先保障可读性：
- 给容器加
overflow-x: auto并设scroll-snap-type: x mandatory，搭配scroll-snap-align: start实现卡片级滑动停靠 - 竖屏手机可转为“单车型纵向展开”模式：用
@media (max-width: 768px)改为grid-template-columns: 1fr，每款车占满一行，配置项垂直堆叠 - 为差异项加视觉提示：比如用
background: #f0f9ff标出高亮配置，或加::after伪元素显示 ✔/× 图标
不复杂但容易忽略的是语义结构与键盘导航支持——确保每个配置值有明确的 aria-labelledby 指向对应配置项，让视障用户也能理解“Model Y 的续航里程是 600km”。
