span N之间的区别

【问题标题】：Difference between auto / span N and span N / span N in CSS grid-columnCSS grid-column中auto / span N和span N / span N之间的区别
【发布时间】：2021-11-15 08:29:32
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： css css-grid

【解决方案1】：

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

如果起点线等于终点线，删除终点线。 ^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

【讨论】：