仅单列内容含容器的表单CSS两栏布局实现方案咨询

问题描述 #

给定如下无法修改的HTML结构（复选框数量动态变化），需实现满足以下要求的两栏布局：

1. 输入字段逐列填充
2. 每行标签置于对应输入框上方
3. 两列元素高度互不影响

<form>
  <label for="id_foo">Foo:</label>
  <input type="text" name="foo" required="" id="id_foo">
  <label for="id_bar">Bar:</label>
  <input type="text" name="bar" required="" id="id_bar">
  <label for="id_baz">Baz:</label>
  <input type="text" name="baz" required="" id="id_baz">
  <label>Select:</label>
  <div id="id_select">
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
    <div><input type="checkbox"><label>Test</label></div>
  </div>
  <input type="submit">
</form>

可行CSS方案 #

通过Grid布局精准定位元素，结合媒体查询仅适配特定屏幕尺寸，无需修改原有HTML结构：

/* 仅在目标屏幕尺寸下启用布局 */
@media (min-width: 768px) {
  form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 均分两列 */
    gap: 1.5rem; /* 列间和行间距 */
    align-items: start; /* 关键：列内元素顶部对齐，不强制行高统一 */
  }

  /* 左栏：三个输入组，标签在上、输入框在下 */
  label[for="id_foo"],
  #id_foo {
    grid-column: 1;
  }
  label[for="id_foo"] { grid-row: 1; }
  #id_foo { grid-row: 2; }

  label[for="id_bar"],
  #id_bar {
    grid-column: 1;
  }
  label[for="id_bar"] { grid-row: 3; }
  #id_bar { grid-row: 4; }

  label[for="id_baz"],
  #id_baz {
    grid-column: 1;
  }
  label[for="id_baz"] { grid-row: 5; }
  #id_baz { grid-row: 6; }

  /* 右栏：选择标签、复选框容器、提交按钮 */
  label:not([for]),
  #id_select,
  input[type="submit"] {
    grid-column: 2;
  }
  label:not([for]) { grid-row: 1; }
  #id_select { grid-row: 2 / span 4; /* 占据多行，高度随复选框数量自适应 */ }
  input[type="submit"] {
    grid-row: 6;
    margin-top: auto; /* 提交按钮固定在右栏底部 */
  }
}

方案说明 #

1. 行列精准定位：通过grid-column和grid-row将每个元素分配到对应位置，实现标签与输入框的上下排列，同时分隔左右两栏。
2. 高度独立控制：align-items: start确保左栏各输入组的高度由自身内容决定，不会被右栏动态变化的复选框高度干扰。
3. 动态适配：复选框容器使用grid-row: span 4占据足够行空间，高度随内容自动扩展，无需额外调整。
4. 特定尺寸适配：通过媒体查询限制布局仅在目标屏幕尺寸生效，不影响其他设备的显示。

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