单选按钮组用 display: grid 选项宽度不一致，因 radio 和 label 默认为行内元素，浏览器将其视为独立网格项，内容尺寸差异导致列宽收缩不均；需包裹统一容器、设 grid-template-columns: repeat(n, 1fr)、所有 label 结构一致并加 min-width: 0 防撑宽。
单选按钮组用 display: grid 为什么选项宽度不一致
因为 <input type="radio"> 默认是行内元素，直接套 Grid 容器时，浏览器会把每个 <label></label> 或 <input> 当作独立网格项，但若标签结构不统一（比如有的带文字、有的没包 <span></span>），内容尺寸就会影响 grid-template-columns 的实际分配。更关键的是：未显式设置 grid-column: span 1 或统一 min-width，Grid 会按内容收缩，而非等分容器。
实操建议：
- 把整个单选组包裹在
<div class="radio-grid"> 中，并设 <code>display: grid和明确列数，例如grid-template-columns: repeat(4, 1fr) - 每个选项必须用相同结构，推荐
<label><input type="radio"><span>选项文本</span></label>，且所有<label></label>都作为直接子元素 - 给
<label></label>加min-width: 0，防止内部文本撑宽导致 Grid 列失衡（尤其 Safari 下常见） - 避免对
<input>本身设width或flex，它只负责状态，样式应由<label></label>承担 -
<label></label>设display: flex; flex-direction: column; align-items: center; justify-content: center;，确保文字垂直水平居中 - 用
input[type="radio"] { appearance: none; }隐藏原生控件，再用::before伪元素画圆点，避免原生 input 的不可控边距 - 为
<label></label>设置cursor: pointer和足够 padding（如padding: 12px 8px），扩大可点击区域 - 如果选项文字长度差异大，加
text-overflow: ellipsis; white-space: nowrap; overflow: hidden;统一截断行为 - 降级方案用
display: inline-block+width: calc(25% - 8px)（假设 4 列、8px 间距），配合vertical-align: top - 用
@supports (display: grid)包裹 Grid 样式，确保老浏览器跳过执行 - 避免依赖
grid-area或grid-row等高级属性，基础布局只用grid-template-columns和gap - 测试时打开开发者工具的「Layout」面板，看 Grid 线是否真对齐 —— 很多时候问题不是代码错，而是父容器有
padding或border干扰了 track sizing - 新增选项时，用
document.createElement("label")构造完整节点，再设 className 和 innerHTML，最后appendChild，别拼 HTML 字符串 - 删选项后，手动触发一次
getComputedStyle(gridContainer).display，强制浏览器重排（小技巧，非必需但稳定） - 如果用框架（如 Vue/React），确保 key 值唯一且稳定，避免因 key 重复导致 DOM 复用后样式丢失
- 检查是否在 JS 中给某个
<label></label>加了style.width内联样式 —— 这会覆盖 Grid 的1fr计算，优先级高于 CSS 类
如何让 Grid 中的 radio 选项真正“等宽”且点击区域合理
等宽 ≠ 视觉上看着一样宽，而是每个选项占据相等的网格轨道，并且用户能点中文字或空白处都触发选择。问题常出在：label 没设 display: block、input 未隐藏但占位、或者用了 justify-content: center 导致内容居中后左右留白不一致。
实操建议：
IE11 或旧版 Safari 下 grid-layout 失效怎么办
IE11 对 grid-template-columns: repeat(4, 1fr) 支持不完整，且不识别 min-width: 0 在 flex/grid 上的效果；旧 Safari（gap 和隐式轨道有 bug。这时候强行用 Grid 会导致列堆叠或宽度归零。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
JavaScript 动态增删 radio 选项后 Grid 布局错乱
DOM 节点增删后，Grid 容器不会自动重排，尤其当用 innerHTML += 追加时，新插入的 <label></label> 可能没继承原有样式规则，或 JS 操作绕过了 CSSOM 更新时机。
实操建议：
Grid 实现等宽单选按钮组本身不难，难的是各种边界场景下宽度“看起来一致”和“行为一致”的双重保障。最容易被忽略的是 label 的 min-width 和 appearance: none 的组合，缺一不可。
