如何仅用CSS根据复选框选中状态将其分置在两列的不同区域

推荐方案（配合JS切换checked类，稳定性高） #

你可以保留给每个复选框包裹容器、JS切换checked类名的结构，修改CSS如下即可实现需求：

对应HTML结构 #

<div class="options">
    <div class="checked">
        <input type="checkbox" id="checkbox1">
        <label for="checkbox1">checkbox</label>
    </div>
    <div>
        <input type="checkbox" id="checkbox2">
        <label for="checkbox2">checkbox</label>
    </div>
    <!-- 更多复选框 -->
</div>

CSS代码 #

.options {
  display: grid;
  /* 定义两列等宽布局，左侧为A区（选中项区域），右侧为B区（未选中项区域） */
  grid-template-columns: 1fr 1fr;
  /* 关键属性：开启密集填充模式，自动补全网格空白，保证两列元素按顺序排列 */
  grid-auto-flow: dense;
  gap: 6px 12px; /* 可选：设置网格间距，优化显示效果 */
}

/* 所有带checked类的选中项全部放到第一列（A区） */
.options .checked {
  grid-column: 1 / 2;
}

/* 所有未选中项全部放到第二列（B区） */
.options > div:not(.checked) {
  grid-column: 2 / 3;
}

原代码问题说明 #

你之前的写法只给选中项设置了grid-row: 1，会强制所有选中项都排在第一行，当选中项数量超过2个时，多余的选中项会自动被挤到第二列，自然无法符合布局要求。

纯CSS实现方案（无需JS加类） #

如果你不想用JS添加类，也可以直接利用复选框的:checked伪类实现，无需修改原生HTML结构：

对应HTML结构 #

<div class="options">
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1">checkbox</label>

    <input type="checkbox" id="checkbox2">
    <label for="checkbox2">checkbox</label>
    <!-- 更多复选框 -->
</div>

CSS代码 #

.options {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr; /* 适配原生结构的input和label分开的情况 */
  grid-auto-flow: dense;
  gap: 6px 8px;
  align-items: center;
}

/* 选中的input和对应label放到左侧两列 */
.options input:checked {
  grid-column: 1 / 2;
}
.options input:checked + label {
  grid-column: 2 / 3;
}

/* 未选中的input和对应label放到右侧两列 */
.options input:not(:checked) {
  grid-column: 3 / 4;
}
.options input:not(:checked) + label {
  grid-column: 4 / 5;
}

这个方案不需要额外JS逻辑，但对原生结构的兼容性稍差，更推荐使用第一种带包裹容器的方案。

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