CSS grid-column中auto/span N与span N/span N的区别是什么

提问内容 #

我正在详细研究CSS中grid-column和grid-row属性的具体工作逻辑，在学习不指定起止位置的跨列/跨行设置方法时，找到了两种实现方案：

• 一种使用双"span"写法
• 一种使用auto搭配span的写法
  我想了解浏览器对这两种写法的解析逻辑，二者是否存在行为差异？以下是设置跨2列的两个示例写法：

.option-1 {
 grid-column: auto / span 2
}

.option-2 {
 grid-column: span 2 / span 2
}

解答 #

grid-column是grid-column-start和grid-column-end两个属性的缩写，斜线分隔的两个值分别对应起始网格线、结束网格线的定位规则，两种写法的解析逻辑和差异如下：

1. grid-column: auto / span 2 解析逻辑

• 起始网格线（grid-column-start）取值为auto：浏览器会按照当前网格流的默认排布顺序，把元素的起始位置放在当前行的下一个可用空位
• 结束网格线（grid-column-end）取值为span 2：结束位置 = 起始位置 + 2，也就是元素从起始位开始往后占2列宽度

2. grid-column: span 2 / span 2 解析逻辑

按照CSS Grid规范的优先级规则，当起始和结束位置都只指定span值、没有明确锚定的网格线编号/名称时：

• 浏览器会先以结束位置的span 2为基准，先按照auto规则确定默认起始位，得到临时结束位 = 默认起始位 + 2
• 再用起始位置的span 2反推，最终起始位 = 临时结束位 - 2
  这个计算过程走完之后，得到的元素跨度、起始位置和第一种写法完全一致。

二者的行为差异

常规布局（默认grid-auto-flow: row无密集排布）下，两种写法的渲染效果没有任何区别。
仅在开启grid-auto-flow: dense密集排布规则的特殊场景下存在细微差异：

• 第一种写法的元素会严格按文档流顺序排布，当前行剩余空间不足2列时就直接换到下一行，不会回填前面的空白间隙
• 第二种写法的元素在密集排布模式下的回填优先级更高，浏览器会优先在前面已有的空白间隙里寻找能放下2列的位置插入，不会严格卡文档流顺序

内容的提问来源于stack exchange，提问作者Andrea Costanzo