重叠网格元素：第二个div无法加载

Question

两个div单独正确显示，但是如果img-1和img-2 div都在容器中，则第二个div消失。

HTML：

<div class="body-background">
    <div class="background-img-1"></div>
    <div class="background-img-2"></div>
</div>

CSS

.body-background {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    width: 100%;
    height: 100%;
}
.background-img-1 {
    background: red;
    grid-column: 1 / 3; 
}
.background-img-2 {
    background: blue;
    grid-column: 2 / 4;
}

箱子是否应该正常重叠？

Answer 1

给两个背景div都赋予grid-row: 1属性（该属性自动变为grid-row: 1 / 2）。我认为浏览器不喜欢将其隐式地提供给两个重叠的单元格。