CSS Grid布局：标题居中、复选框居列尾的纯CSS实现方案

方法1：嵌套CSS Grid布局（推荐，语义化更强） #

利用嵌套Grid让标题横跨列内所有轨道实现居中，复选框单独占据右侧轨道，无需绝对定位：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; /* 可选，调整列间距 */
}

.grid > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; /* 垂直居中对齐内容 */
}

.grid > div span {
  grid-column: 1 / -1; /* 标题横跨所有列 */
  text-align: center; /* 水平居中 */
}

对应HTML结构（保持你原有的代码）：

<div className="grid grid-cols-3">
  <div>
    <span>Plannable</span>
    <input type="checkbox" />
  </div>

  <div>
    <span>Archive</span>
    <input type="checkbox" />
  </div>

  <div>
    <span>Export</span>
    <input type="checkbox" />
  </div>
</div>

方法2：绝对定位实现 #

通过父容器相对定位，让复选框固定在列的右侧，标题自然居中：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.grid > div {
  position: relative;
  padding-right: 24px; /* 预留复选框空间，避免文本被遮挡 */
}

.grid > div span {
  display: block;
  text-align: center;
}

.grid > div input[type="checkbox"] {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%); /* 垂直居中复选框 */
}

说明 #

两种方法均无需JavaScript，完全适配列宽变化：

• 嵌套Grid方法更符合CSS布局语义化，内容关系清晰，自动处理垂直对齐。
• 绝对定位方法更简洁，适合快速实现，只需注意给父容器添加右侧内边距，避免标题与复选框重叠。

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