.container {
display:grid;
grid-template-columns: 200px 200px;
grid-template-rows: 100px 100px;
grid-auto-flow: row;
grid-gap: 5px 5px;
height:500px;
width:50%;
border: 1px solid;
}
.grid-box {
background-color: skyblue;
padding: 10px 5px;
}
.four {
grid-column: span 2/3;
grid-row: 2;
} <div class="container">
<div class="grid-box one">First</div>
<div class="grid-box two">two</div>
<div class="grid-box three">three</div>
<div class="grid-box four">Four</div>
<div class="grid-box five">Five</div>
<div class="grid-box six">Six</div>
</div>根据我的阅读，跨度2/3应该是无效的，并且不起作用，并且实际上，它似乎无法正常工作，因为该项目不是从第二列开始，但是它确实在第三列结束。
但是，使用跨度2/4会产生以下结果：
.container {
display:grid;
grid-template-columns: 200px 200px;
grid-template-rows: 100px 100px;
grid-auto-flow: row;
grid-gap: 5px 5px;
height:500px;
width:50%;
border: 1px solid;
}
.grid-box {
background-color: skyblue;
padding: 10px 5px;
}
.four {
grid-column: span 2/4;
grid-row: 2;
} <div class="container">
<div class="grid-box one">First</div>
<div class="grid-box two">two</div>
<div class="grid-box three">three</div>
<div class="grid-box four">Four</div>
<div class="grid-box five">Five</div>
<div class="grid-box six">Six</div>
</div>看来它的工作完全符合预期。该项目从第二列开始，到第四列结束。
那么，它实际上有效吗？为什么现在可以使用，但是如果项目在第3列结束则不能使用？
根据我的阅读，跨度2/3应该无效，并且不起作用
不，这是有效的，并且工作正常。
span 2/3表示在网格线3（而不是第3列）处结束并向后跨2列。的逻辑相同span 2/4。它是以下内容的简写：
grid-column-start: span 2;
grid-column-end: 3;
因此，在两种情况下，您的元素都将恰好占据2列，并且只有结尾行不同。
值得注意的是，在您的情况下，您定义了2列的布局，因此您有3行（从1到3）。这span 2/4将强制创建额外的隐式列，使其总共具有3列和4行。第三列具有auto您可以注意到的宽度。
如果没有关键字，span那将是另外一个故事，但您仍然无法考虑专栏
2/4 表示从第2行开始到第4行结束（覆盖第2列和第3列）
2/3 表示从第2行开始到第3行结束（仅覆盖第2列）
如果您缺少行的概念，请联系以下相关问题：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句