应使用CSS Grid布局实现复选框多列水平对齐：设父容器display: grid，用grid-template-columns定义列轨道（如repeat(4, 1fr)或repeat(auto-fit, minmax(150px, 1fr))），配合gap统一间距，并通过align-items控制垂直对齐。
直接用 display: grid，别碰 float 或 inline-block 模拟列——前者失效快，后者在数量少时留白错位，根本不是“整齐”，只是“看起来凑合”。
用 grid-template-columns 控制列数和宽度
把复选框容器设为 display: grid，再用 grid-template-columns 明确列轨道。比如要四列等宽，就写：grid-template-columns: repeat(4, 1fr)；如果想每列至少 150px、自动适应屏幕，就用：grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))。
常见错误是只写 grid-column: 2 却没定义列轨道，结果所有 <input type="checkbox"> 叠在左上角不动。
- 不要用
width: 25%+inline-block：百分比基于父容器，但复选框文字长度不一，实际渲染后列宽参差 - 避免固定像素列宽（如
200px）：小屏下会横向溢出，minmax()才是响应式安全写法 -
repeat(4, 1fr)和repeat(auto-fit, ...)行为不同：前者强制四列，哪怕只剩一个复选框也撑满四格；后者按内容自适应列数
用 gap 统一间距，别靠 margin
gap 是网格专属属性，只作用于网格项之间，不会在首尾多出空白，也不受 margin collapse 影响。设 gap: 12px 就能同时控制行距和列距。
立即学习“前端免费学习笔记（深入）”；
对比 margin-right + margin-bottom，后者容易漏写、重复叠加，尤其动态插入复选框时布局瞬间错乱。
- 如果只要水平间距，
column-gap: 12px更精准；只要垂直间距，用row-gap: 8px -
gap在 IE 中完全不支持，若必须兼容 IE11，得 fallback 到flex-wrap+gap的 polyfill 或改用margin手动计算 - 别给单个复选框项设
margin：它会破坏gap的均等逻辑，导致最后一行列宽不一致
让复选框和文字对齐一致，关键在 align-items
默认情况下，<input type="checkbox"> 和紧随其后的 <label></label> 文字基线（baseline）不齐，尤其字体大小或行高变化时，视觉上像“浮起来”或“沉下去”。加 align-items: start 或 align-items: center 就能统一垂直对齐方式。
注意：这个属性必须设在网格容器（即包裹所有复选框的父元素）上，不是单个 <label></label> 上。
-
align-items: start让所有复选框顶部对齐，适合文字高度差异大的场景 -
align-items: center垂直居中，更符合多数表单预期，但需确保父容器有足够高度，否则文字可能被截 - 别混用
vertical-align：它对 grid item 无效，只在 inline/inline-block 场景起作用
真正难的不是“排成四列”，而是“当只剩 1 个或 5 个复选框时，依然保持列宽一致、间距均匀、文字不换行溢出”。这些细节全靠 grid-template-columns 的函数表达式和 gap 的稳定性兜底，而不是靠肉眼调 margin。
