CSS实现自适应宽度的选项网格布局方案咨询

直接用CSS Grid就能完美实现你要的效果，核心思路是利用Grid的自动列填充和同列宽度统一特性，配合内部的Flex布局对齐复选框与标签。

实现代码 #

HTML（保持原有结构即可） #

<ul class="checkbox-grid">
  <li>
    <input type="checkbox" id="opt1">
    <label for="opt1">短标签</label>
  </li>
  <li>
    <input type="checkbox" id="opt2">
    <label for="opt2">这是一个超级长的标签内容，用来测试宽度自适应</label>
  </li>
  <li>
    <input type="checkbox" id="opt3">
    <label for="opt3">中等长度标签</label>
  </li>
  <li>
    <input type="checkbox" id="opt4">
    <label for="opt4">超超超超超超超超超超长的测试标签内容</label>
  </li>
  <li>
    <input type="checkbox" id="opt5">
    <label for="opt5">短标签2</label>
  </li>
</ul>

CSS 核心样式 #

/* 重置列表默认样式 */
.checkbox-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 核心Grid布局 */
  display: grid;
  /* 自动填充列数，每列宽度由该列最宽元素决定，同时自适应容器宽度 */
  grid-template-columns: repeat(auto-fill, max-content);
  /* 行、列间距 */
  gap: 1rem 0.8rem;
  /* 网格项在容器内左对齐（可按需调整） */
  justify-content: start;
}

/* 每个选项项的内部布局，对齐复选框与标签 */
.checkbox-grid li {
  display: flex;
  align-items: center;
  /* 复选框与标签的间距 */
  gap: 0.5rem;
  /* 强制选项项占满列宽，避免标签换行后宽度不一致 */
  width: 100%;
}

/* 固定复选框宽度，防止被压缩 */
.checkbox-grid input[type="checkbox"] {
  flex-shrink: 0;
}

/* 标签自动换行，避免溢出 */
.checkbox-grid label {
  flex: 1;
  word-wrap: break-word;
}

效果说明 #

• 容器宽度充足时：自动填充尽可能多的列，每列宽度取该列最宽标签的最小宽度，符合「各列取最小宽度」的需求。
• 容器宽度收窄时：列数自动减少，合并后的列宽度取该列所有标签中最宽的尺寸，短标签所在列会自动扩展宽度适配，维持类表格的对齐效果。
• 长标签无法单行显示时：标签自动换行，复选框始终保持对齐，不会出现错位。

可选调整 #

• 若希望列宽度有最小限制（避免过窄），可将grid-template-columns改为repeat(auto-fill, minmax(150px, max-content))，自定义最小列宽数值。
• 调整justify-content为space-between或center，可改变网格在容器内的整体对齐方式。

内容的提问来源于stack exchange，提问作者Sandman