CSS grid-column 中 auto / span N 和 span N / span N 的区别

Question

我详细检查了 grid-column 和 grid-row 属性的工作原理，当我查看如何在不指定起点或终点的情况下设置跨度时，我偶然发现了 2 个解决方案:

一个使用双“span”
一个使用 auto 和 span

现在我很好奇浏览器如何解释这两个选项，但我找不到具体的解释。这两个表达式的行为有何不同（如果有）？以下面两个选项为例（这里我为一列设置了span 2）

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

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

Answer 1

首先，grid-column: span 2 / span 2 等于 grid-column: span 2 / auto 因为：

If the start line is equal to the end line, remove the end line. ^ref

它的行为与 grid-column: auto / span 2

相同

.container {
   display:grid;
   grid-template-columns:repeat(4,1fr);
   margin:5px;
}
.container > div {
  height:50px;
  background:red;
}

<div class="container">
  <div style="grid-column:span 2/auto"></div>
</div>
<div class="container">
  <div style="grid-column:auto/span 2"></div>
</div>

使用简单的词就像你在说：自动放置元素并占据两列。

您可以在这里找到完整的算法：https://drafts.csswg.org/css-grid/#placement

CSS grid-column 中 auto / span N 和 span N / span N 的区别

Difference between auto / span N and span N / span N in CSS grid-column

css

css-grid