用CSS Grid实现答题卡矩阵需设grid-template-columns控制列数、grid-auto-rows保证等高，结合label语义化结构提升可访问性；响应式用媒体查询或auto-fit适配屏幕；交互上绑定label、加:focus-visible和:checked反馈。

在 H5 页面中用 CSS Grid 实现答题卡选项矩阵（比如单选题的 A/B/C/D 或多选题的 3×3 选项网格），关键在于用 grid-template-columns 控制列数、grid-auto-rows 或显式行定义保证均匀高度，并结合语义化结构提升可访问性与点击体验。

基础矩阵结构：固定列数 + 自适应行

适用于选项数量不固定但每行显示固定个数（如每行 4 个选项）的场景：

• HTML 使用 <div class="options-grid"> 包裹所有 <code><label></label>，每个 label 内含 input[type="radio/checkbox"] + span
• CSS 设置：
  .options-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  这样无论有 4 个还是 12 个选项，都会自动按每行 4 列排列，等宽分布，间隙统一

等高对齐：避免选项高度参差影响视觉

文字长短不一或含图标时，选项容器高度可能不一致，破坏矩阵感：


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• 给每个 label 设定 display: flex; align-items: center; min-height: 40px;，确保内容垂直居中且最小高度一致
• 或更彻底地：在 grid 容器上加 grid-auto-rows: minmax(40px, auto);，让每行至少 40px 高，内容多时自动撑开

响应式优化：小屏自动降为单列

手机竖屏下 4 列太挤，需断点调整：

• 添加媒体查询：
  @media (max-width: 480px) { .options-grid { grid-template-columns: 1fr; } }
• 也可用 repeat(auto-fit, minmax(80px, 1fr))) 实现“尽可能多列，但每列不窄于 80px”，适合动态适配不同屏幕

可访问性 & 交互增强

答题卡不是纯展示，要兼顾键盘操作、屏幕朗读和触控反馈：

• 每个 label 必须正确绑定 for 或包裹 input，确保点击文字也能选中
• 用 :focus-visible 给键盘用户加清晰焦点框，例如：
  label:focus-within { outline: 2px solid #007aff; outline-offset: 2px; }
• 选中态用 input:checked + span 改变背景色或加对勾图标，视觉反馈明确