如何用CSS Grid实现两列上一行下布局及复选框文本对齐

1. 实现上方两列、下方一行的布局 #

方案一：CSS Grid 实现 #

CSS Grid是最直接的实现方式，可通过网格行列划分或语义化的区域定义完成：
假设基础HTML结构为：

<div class="layout-container">
  <div class="top-left">左上区块</div>
  <div class="top-right">右上区块</div>
  <div class="bottom">下方通栏区块</div>
</div>

对应CSS代码：

.layout-container {
  display: grid;
  /* 定义2列，1fr表示两列均分可用宽度 */
  grid-template-columns: 1fr 1fr;
  /* 定义行高，第一行自适应内容，第二行同理 */
  grid-template-rows: auto auto;
  /* 可选：设置区块间的间距 */
  gap: 16px;
}

.bottom {
  /* 让下方区块横跨全部列 */
  grid-column: 1 / -1;
}

如果需要更语义化的写法，可使用grid-template-areas：

.layout-container {
  display: grid;
  grid-template-areas:
    "left right"
    "bottom bottom";
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.top-left { grid-area: left; }
.top-right { grid-area: right; }
.bottom { grid-area: bottom; }

方案二：Flexbox 实现 #

通过嵌套Flex容器也能达成需求，适合习惯Flex布局的场景：
基础HTML结构：

<div class="layout-container">
  <div class="top-row">
    <div class="top-left">左上区块</div>
    <div class="top-right">右上区块</div>
  </div>
  <div class="bottom">下方通栏区块</div>
</div>

对应CSS代码：

.layout-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.top-row {
  display: flex;
  gap: 16px;
}

.top-row > div {
  flex: 1; /* 让两列均分宽度 */
}

.bottom {
  width: 100%;
}

2. 不修改HTML的自定义复选框与文本排版 #

针对给定的HTML结构，要实现文本不换行至复选框下方、换行后与首行文本对齐的效果，可通过绝对定位复选框+容器内边距实现：

完整CSS代码： #

.custom-label {
  /* 设置相对定位，作为复选框绝对定位的参照容器 */
  position: relative;
  /* 给复选框预留左侧空间，值略大于复选框宽度即可 */
  padding-left: 32px;
  /* 转为块级元素，方便控制排版 */
  display: block;
  /* 可选：设置行高提升可读性 */
  line-height: 1.5;
  cursor: pointer;
}

.custom-checkbox {
  width: 24px;
  height: 24px;
  background: blue;
  border: 2px solid gray;
  /* 绝对定位到label的左侧预留区域 */
  position: absolute;
  left: 0;
  top: 0;
  /* 确保复选框与文本顶部对齐 */
  align-self: flex-start;
}

/* 可选：模拟复选框选中状态（需配合JS切换类名） */
.custom-checkbox.checked {
  background-color: darkblue;
  /* 添加对勾图标 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 6L9 17L4 12"/></svg>');
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
}

实现逻辑： #

1. 给.custom-label设置padding-left，预留出复选框的位置，确保所有文本行都从内边距右侧开始排列，不会跑到复选框下方。
2. 将.custom-checkbox绝对定位到label的左上角区域，填充预留空间，同时不干扰文本的正常排版流。
3. 利用position: relative确保复选框的定位参照是label容器，而非页面全局。

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