我有一个 3 X 3CSS Grid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout.
我有一排，其中有三项A, B & C.
我想要物品C有一个rowspan of 2.
为此，我正在使用grid-row: 1 / span 2;。它占用两行，但它被放置在第一列中，而不是简单地位于第三列中。我不知道为什么会发生这种情况。
我希望项目 C 保留在 HTML 中的位置。
解决此问题的一种方法是显式设置grid-column: 3 / span 1我不想这样做。我希望项目按照 HTML 中的方式放置。
有什么办法可以抑制这种行为吗？
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
h1 {
border: 2px solid;
padding: 0;
margin: 0;
font-size: 20px;
}
.a {
grid-row: 1 / span 2;
background: orange;
}
<div class="grid-container">
<div>
<h1>A</h1>
</div>
<div>
<h1>B</h1>
</div>
<div class="a">
<h1>C</h1>
</div>
</div>
另一种解决方法（这指出了原因why正在为其他项目列出一行）：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
h1 {
border: 2px solid;
padding: 0;
margin: 0;
font-size: 20px;
}
.a {
grid-row: 1 / span 2;
background: orange;
}
.b {
grid-row: 1;
}
<div class="grid-container">
<div class="b">
<h1>A</h1>
</div>
<div class="b">
<h1>B</h1>
</div>
<div class="a">
<h1>C</h1>
</div>
</div>
这种行为的原因是限制性更强的元素首先被定位。这样网格算法获得解的可能性就更大了。
也就是说，有要求的元素将首先定位，没有要求的元素最后定位。
步骤 2（对于a项）和 4（对于其余项）规范的一部分 https://www.w3.org/TR/css3-grid-layout/#auto-placement-algo
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
