空洞是 grid-auto-flow: row 的默认行为所致，非 bug；它按“填满一行再换行”布局，导致末行未满时出现视觉空白；align-items: stretch 无法填补空洞，因它只拉伸已有轨道内的子项；grid-auto-flow: dense 仅在存在显式定位子项时才可填充缝隙，但会破坏 DOM 顺序；最可靠方案是使用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，配合父容器明确宽度与子项不锁高，使空轨道自动收缩。
grid-auto-flow: row 是空洞的根源
空洞不是 bug，是 grid-auto-flow: row 的默认行为：它严格按“填满一行再换行”执行。比如 grid-template-columns: repeat(3, 1fr) 放 7 个子项，前两行各 3 个，第 3 行只有 1 个，第 4 行就空着——人眼看到的是“空洞”，其实是布局节奏导致的视觉断层。
常见诱因包括：
-
min-width或flex-shrink: 0让某个子项无法收缩，被迫独占一行，把后续项全挤到下一行 - 子项内图片未设
height: 100%或文字过长撑高单个单元格，拉高整行后其他项被 stretch 拉伸但内容错位，形成“假等高+真留白” - 开发者工具里高亮网格线后发现空白处其实有轨道，只是没内容——说明是自动流未填充，而非样式错误
align-items: stretch 并不能填洞
align-items: stretch 只控制子项在**已有轨道内**的拉伸行为，它不生成新轨道，也不移动子项位置。如果某行因数量不足而空出两列，stretch 对那两列毫无作用——因为那里根本没有子项。
容易混淆的点：
立即学习“前端免费学习笔记（深入）”；
- 误以为加了
align-items: stretch就能“自动补齐”，其实它只对已分配到该行的子项生效 - 检查子项计算后的
align-self值是否为auto（继承 stretch），但即使都正确，空洞依然存在 - 真正影响“是否留空”的是
grid-auto-flow和grid-template-columns的配合，不是对齐属性
grid-auto-flow: dense 能填洞，但有代价
grid-auto-flow: dense 允许未定位的子项主动插入前面跨行/跨列项目留下的缝隙中，提升空间利用率。但它只填“已声明位置后留下的空缺”，不是万能补丁。
必须满足条件才有效：
- 至少有一个子项用了显式定位，如
grid-column: 1 / 3或grid-row: 2 - 其余未定位子项才能被 dense “塞进”空隙；纯自动流下 dense 和 row 行为几乎一致
- DOM 顺序和视觉顺序会严重错位，对可访问性不友好，屏幕阅读器仍按原始 HTML 读
真正可靠的填洞方案是改用 grid-auto-fit + minmax()
比起硬填空洞，更推荐让布局本身不产生空洞：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) 是目前最稳的响应式卡片方案。
关键点：
-
auto-fit会在无内容时收缩空轨道为 0，不像auto-fill那样强行占位 -
minmax(280px, 1fr)中的1fr是收缩前提，写成minmax(280px, 300px)就会退化为固定列，空洞照旧 - 父容器必须有明确宽度（如
width: 100%），否则 grid 无法准确计算“多少列合适” - 子项别锁死
height或min-height，否则会干扰auto-fit的收缩逻辑
object-fit: cover 把整行撑高，其他项被拉伸后内部大片留白——得先用开发者工具确认是轨道空，还是内容溢出。 
