时间戳

首页 > 解决方案 > CSS grid-column中auto / span N和span N / span N之间的区别

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

问题描述

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

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

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

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

标签： csscss-grid

解决方案

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

如果 start line 等于 end line，则删除 end line。参考

它的行为与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.c​​sswg.org/css-grid/#placement

推荐阅读