Grid“空行”实为grid-auto-flow:row默认按行填满所致，可通过改用column流向、row dense回填或约束子项尺寸（如min-width:0、auto-fill列）解决。
Grid 网格布局中出现“空行”，通常不是因为有显式空格，而是 grid-auto-flow 默认值 row 导致的自动填充逻辑：它会优先按行从左到右、从上到下填满每行，即使某行剩余空间不足以容纳下一个子项，也会强行换行，留下视觉上的“空行”或错位。
理解 grid-auto-flow: row 的默认行为
当容器设置了 grid-template-columns（比如 repeat(3, 1fr)），但子元素数量不能被列数整除时，grid-auto-flow: row 会严格按“填满一行再换行”的规则处理。例如 7 个子项、3 列 → 前两行各 3 个，第 3 行只剩 1 个，但第 4 行完全空白（如果后续没新元素）——这容易被误认为“空行”。其实不是真留空，而是布局节奏导致的视觉断层。
用 grid-auto-flow: column 改变流向
切换为列优先填充，能有效缓解横向空间不足引发的换行混乱，特别适合内容高度不一、需紧凑垂直排列的场景：
- 设置
grid-auto-flow: column后，Grid 会先填满第一列，再填第二列，依此类推 - 配合
grid-template-rows: masonry（实验性，仅 Firefox 支持）或固定行高 +grid-auto-rows，可实现更自然的瀑布流效果 - 注意：必须显式定义列数（如
grid-template-columns: repeat(3, minmax(200px, 1fr)))），否则列数不确定会导致不可控布局
更稳妥的替代方案：dense + row
如果必须保持行主序（比如响应式多列需要对齐首行标题），又想避免“空行感”，可用 grid-auto-flow: row dense：
-
dense允许 Grid 尝试用更小的空隙插入之前跳过的项目，提升空间利用率 - 适合子项有
grid-column跨列声明的复杂布局，能回填因跨列产生的空缺 - 慎用：可能打乱 DOM 顺序与视觉顺序，影响可访问性和语义逻辑
检查并约束子项尺寸是根本
所谓“空行”，很多时候是子项最小宽度超过单列可用空间所致。例如容器宽 600px，设了 grid-template-columns: repeat(3, 1fr)，但某个子项 min-width: 220px → 实际每列约 200px，该子项被迫撑开整行，造成下方错位。
- 统一用
min-width: 0或width: 0; min-width: auto释放子项收缩能力 - 对图片/卡片类元素，加
max-width: 100%和height: auto防止溢出 - 用
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)))替代固定列数，让浏览器根据容器宽度自动计算列数
基本上就这些。关键不在“禁用空行”，而在于明确填充意图：要纵向紧凑就选 column，要横向对齐且允许智能回填就用 row dense，再辅以合理的尺寸控制 —— 空行自然消失。
