我有一个 2 列 3 行的 CSS 网格。由于有角度的 ngif 子句,第三行内容并不总是存在。图像出现在跨越 3 行的第一列中。话虽如此,我在 Chrome(80.0.3987.87,这是我发布的最新稳定版本)和 Firefox 中得到了 2 个不同的结果。
有没有办法控制行,使其行为类似于 Firefox,即当图像高度大于前 2 行高度之和时,第三行会增长。
.grid {
width:400px;
display:grid;
grid-template-columns: 40px 1fr;
grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(0, 1fr);
}
.image {
width:40px;
height:100px;
grid-column:1;
grid-row:1 / span 3;
background-color: #f00;
}
.text1 {
grid-column:2;
grid-row:1;
}
.text2 {
grid-column:2;
grid-row:2;
}
<div class="grid">
<div class="image"></div>
<div class="text1">Text 1</div>
<div class="text2">Text 2</div>
</div>
这里是codepen https://codepen.io/cadilhac/pen/yLNBmMd您可以在 Chrome 和 Firefox 中查看。
这是一张显示差异的图片:
正如您所看到的,Chrome 同等地增加了第 1 行和第 2 行的高度(第 3 行保持 0)。 Firefox 仅增加 row2 的高度,即最后一个包含内容的可见行。
请注意,我尝试将 grid-template-rows 设置为“minmax(0, auto) minmax(0, auto) 1fr”,但是第 3 行将具有一个奇怪的高度,使网格高度大于其内容。
Update:啊!能够在以前的 Chrome 版本(79)上尝试,这次我得到了与 Firefox 相同的结果。所以看来80改变了它。这里有人可以证实一下吗?
您可以像下面这样更新您的代码。它在 Chrome 80 和 Firefox 中似乎工作相同。值得注意的是1fr
等于minmax(auto, 1fr)
这确实不同于minmax(0,1fr)
但仍然不知道到底是什么导致两者的行为不同。
.grid {
width:400px;
display:grid;
grid-template-columns: 40px 1fr;
grid-template-rows: auto auto 1fr;
}
.image {
width:40px;
height:100px;
grid-column:1;
grid-row:1 / span 3;
background-color: #f00;
}
.text1 {
grid-column:2;
grid-row:1;
}
.text2 {
grid-column:2;
grid-row:2;
}
<div class="grid">
<div class="image"></div>
<div class="text1">Text 1</div>
<div class="text2">Text 2</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)