在表单页面设计中，当存在多个复选框需要按多列水平排列时，使用CSS Grid布局可以快速实现整齐的对齐效果，无需复杂的浮动或定位计算，适配不同数量的复选框场景。
基础HTML结构搭建
首先我们需要准备复选框的容器和对应的复选框元素，每个复选框包含输入框和对应的文本标签，结构如下：
<div class="checkbox-grid-container">
<div class="checkbox-item">
<input type="checkbox" id="option1" />
<label for="option1">选项一</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="option2" />
<label for="option2">选项二</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="option3" />
<label for="option3">选项三</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="option4" />
<label for="option4">选项四</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="option5" />
<label for="option5">选项五</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="option6" />
<label for="option6">选项六</label>
</div>
</div>
CSS Grid核心样式配置
接下来通过CSS Grid属性配置容器，实现复选框的多列水平对齐，核心是通过grid-template-columns定义列数，配合gap设置元素间距：
.checkbox-grid-container {
/* 启用Grid布局 */
display: grid;
/* 定义3列，每列等宽，1fr代表剩余空间分配比例 */
grid-template-columns: repeat(3, 1fr);
/* 行与列之间的间距为16px */
gap: 16px;
/* 容器最大宽度限制，避免过宽时列间距过大 */
max-width: 600px;
margin: 20px 0;
}
.checkbox-item {
/* 每个复选框项内部使用flex布局对齐输入框和文本 */
display: flex;
align-items: center;
gap: 8px;
/* 避免内容过长时换行 */
white-space: nowrap;
}
/* 调整复选框和标签的默认样式，提升视觉一致性 */
.checkbox-item input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
.checkbox-item label {
cursor: pointer;
font-size: 14px;
color: #333;
}
响应式适配调整
如果需要在不同屏幕尺寸下调整列数，可以添加媒体查询，小屏幕时减少列数保证可读性：
/* 屏幕宽度小于768px时，改为2列布局 */
@media (max-width: 768px) {
.checkbox-grid-container {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
/* 屏幕宽度小于480px时，改为1列布局 */
@media (max-width: 480px) {
.checkbox-grid-container {
grid-template-columns: 1fr;
gap: 10px;
}
}
常见问题说明
- 如果复选框数量不是列数的整数倍，Grid布局会自动处理最后一行的空位，不会破坏整体对齐效果。
- 若需要固定列宽而非等比例分配，可以将
grid-template-columns的值改为固定像素，例如repeat(3, 150px)代表3列每列宽150px。 - 如果需要调整列的水平对齐方式，可以给容器添加
justify-items: start等属性，控制每个网格项在单元格内的对齐位置。
完整运行示例
以下是整合所有样式的完整可运行代码，直接复制到HTML文件中即可查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid复选框多列对齐示例</title>
<style>
.checkbox-grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 600px;
margin: 20px 0;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.checkbox-item input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
.checkbox-item label {
cursor: pointer;
font-size: 14px;
color: #333;
}
@media (max-width: 768px) {
.checkbox-grid-container {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
@media (max-width: 480px) {
.checkbox-grid-container {
grid-template-columns: 1fr;
gap: 10px;
}
}
</style>
</head>
<body>
<div class="checkbox-grid-container">
<div class="checkbox-item">
<input type="checkbox" id="option1" />
<label for="option1">选项一</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="option2" />
<label for="option2">选项二</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="option3" />
<label for="option3">选项三</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="option4" />
<label for="option4">选项四</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="option5" />
<label for="option5">选项五</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="option6" />
<label for="option6">选项六</label>
</div>
</div>
</body>
</html>