使用CSS GRID为何出现间隙？代码差异解析

嘿，这个问题其实是CSS Grid自动放置算法的典型特性，我来给你拆解清楚：

为什么第一段代码会出现间隙？ #

这是Grid默认的**稀疏放置（Sparse Placement）**逻辑导致的，具体过程是这样的：

1. 当你只给.item1设置grid-column: 2/4但没指定行位置时，Grid会先把.item1放在第一行的列2-4位置（这是第一个能容纳它的行轨道，毕竟它要占2个列）。
2. 接下来处理第二个元素时，默认的grid-auto-flow: row（行优先）会从上一个元素的结束位置开始找下一个可用单元格。.item1的结束位置是列线4、行线2，所以插入点就到了第一行的列线5——但我们只定义了4个显式列，列线5不存在。
3. 这时候算法会自动换行到第二行的列线1，把第二个元素放在这里，直接跳过了第一行的列1轨道，自然就出现了间隙。

说白了：默认情况下Grid不会回头去填前面的空位，只会顺着元素顺序往后放。

两段代码的核心差异 #

核心区别就是是否显式锁定了.item1的行位置：

• 第一段代码里，.item1的行位置是默认的auto，虽然它被放在了第一行，但后续元素的插入点是从它结束的位置开始，完全不会考虑第一行还空着的列1。
• 第二段代码中，你加了grid-row: 1/2，相当于明确告诉Grid：“这个元素必须待在第一行的第一个行轨道里”。这时候自动放置算法会重新梳理整个网格的可用空间，优先把后续元素塞进第一行剩下的列1轨道里，也就符合你的预期了。

顺便提一句：如果你不想给.item1加行定位，也可以给容器加grid-auto-flow: row dense，开启密集放置模式，这样算法会自动填充前面的空位，也能解决间隙问题。

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