网格化问卷选项的核心是用css grid实现多列等宽排列，需语义正确、可访问、易交互：用repeat(5,1fr)均分5列，响应式用auto-fit+minmax适配小屏；每个选项须含绑定label的radio/checkbox；间距用gap而非margin；移动端默认单列，断点后转多列。
问卷调查选项做网格化选择，核心是用 CSS Grid 控制多列等宽排列，同时保证语义正确、可访问、易交互。不是简单堆 div，而是结构清晰、响应自然的布局。
用 grid-template-columns 定义等分列数
单选题或复选题的选项（如“非常同意、同意、一般、不同意、非常不同意”）适合横向网格排布。推荐用 fr 单位均分空间：
-
grid-template-columns: repeat(5, 1fr)—— 自动创建 5 列，每列等宽，内容自适应 - 若需固定最小宽度+弹性扩展，改用
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))))，适配小屏自动换行 - 避免写死像素值（如
120px 120px 120px），否则在窄屏会溢出或缩成一团
每个选项必须是独立的表单控件 + label 绑定
网格项（.option）不能只是文字容器，必须包含可操作的表单元素：
- 单选题：所有
<input type="radio">共享同一个 name（如name="satisfaction"），value 各不相同 - 复选题：所有
<input type="checkbox">共享同一个 name（如name="interests"） - 每个 input 必须有唯一 id，并用
<label for="id"></label>显式关联，保障点击文字也能触发选择
用 gap 统一选项间距，禁用 margin
选项之间留白必须用 gap，而不是给每个 item 加 margin：
-
gap: 0.75rem或column-gap: 1rem—— 干净控制列间空隙，不干扰边界 - 加 margin 会导致外边距折叠、对齐偏移，尤其在 flex 嵌套 grid 时容易错位
- gap 不影响容器内边距，也不影响屏幕阅读器识别逻辑，是 Grid 布局的原生间距方案
移动端优先：小屏自动转为单列堆叠
问卷常在手机填写，网格需响应式降级：
- 默认用
grid-template-columns: 1fr（单列） - 加媒体查询：
@media (min-width: 640px) { grid-template-columns: repeat(3, 1fr); } - 若用 Tailwind，直接写
grid grid-cols-1 md:grid-cols-3，更简洁 - 避免在小屏强行维持多列，否则文字挤在一起、点击热区过小，影响体验
