CSS Grid 跨列布局不均非 bug，需主动匹配列数与跨列逻辑：明确 grid-template-columns、用 grid-column-end 精确终止、响应式调整 span 值、避免跨列与自动行高冲突。
当 CSS Grid 子元素使用 grid-column: span N 跨列时，若容器列数不能被跨列数整除，就容易出现最后一行子项排列不均、留白或溢出——这不是 bug，而是网格轨道按定义严格分配的结果。关键在于主动控制列数与跨列逻辑的匹配关系。
明确容器的列数定义
Grid 布局的“平衡感”始于显式列声明。避免依赖 auto-fit/auto-fill 的隐式行为，尤其在需要跨列时：
- 用
grid-template-columns: repeat(4, 1fr)明确设为 4 列，再让某子项grid-column: span 3，它就会占前三列，第四列留给下一个子项——布局可预测 - 若用
repeat(auto-fit, minmax(200px, 1fr)))，浏览器会根据容器宽度动态生成列数，此时span 3可能跨不完整的三列（比如只剩两格），导致错位
用 grid-column-end 精确终止位置
grid-column: span N 是相对起始线计算，但有时你需要“停在某条线”，而非“跨几条线”。这时改用终点定位更稳妥：
-
grid-column: 1 / -1表示从第 1 条线到最后一行线（整行通栏） -
grid-column: 2 / 5表示从第 2 条线开始，到第 5 条线结束（固定占 3 列），不受起始位置是否自动计算影响 - 配合
grid-auto-flow: dense可让后续小项目填充前面留下的空隙，缓解不均衡感
响应式地调整跨列数
不同屏幕下保持视觉平衡，需随列数变化同步调整 span 值：
Find JSON Path Online
下载
Easily find JSON paths within JSON objects using our intuitive Json Path Finder
立即学习“前端免费学习笔记（深入）”；
- 4 列布局 → 主内容
span 3，侧边栏span 1 - 转为 2 列时，
span 3会强制换行或溢出，应改为span 2或1 / -1 - 可用媒体查询或
@container（支持环境下）做条件切换：@container (min-width: 600px) { .hero { grid-column: span 2; } }
避免跨列与自动行高冲突
如果子元素内容高度差异大，又统一跨相同列数，会导致行高被最高项撑开，视觉上“不齐平”：
- 给父容器加
align-items: start，防止子项默认拉伸对齐底部 - 对跨列项单独设置
align-self: start或end，控制其在行内的垂直定位 - 慎用
grid-auto-rows: minmax(200px, auto)，它会让每行至少 200px，加剧空白感；可改用grid-auto-rows: auto+ 子项内部 flex 布局来约束高度
