CSS 网格行无法获得适合内容的最小可能高度

Question

我很难解释我的问题。在获得有关问题本身的帮助之前，我会非常高兴通过评论获得一些帮助。

我使用 CSS Grid 将不同高度的图像布局在两列中。网格中的图像位置是明确的。较高的图像设置为跨越两行或更多行。我希望我的专栏中没有任何空白。但在最终的布局中，某些行的高度超出了容纳内容所需的高度。

我已经使用

aspect-ratio

构建了一个示例来模拟图像固有比率和减少的项目集：

<style>
    ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
        margin: 10px;
        padding: 0;
    }

    li {
        align-items: center;
        background: lightgrey;
        border: 2px solid red;
        display: flex;
        flex-flow: column;
        font-size: 24px;
        justify-content: center;
    }

    li:nth-child(1) {
        grid-area: 1/1/2/2;
    }

    li:nth-child(2) {
        grid-area: 1/2/3/3;
    }

    li:nth-child(3) {
        grid-area: 2/1/4/2;
    }

    li:nth-child(4) {
        grid-area: 3/2/5/3;
    }

    li:nth-child(5) {
        grid-area: 4/1/6/2;
    }
</style>
<ul>
    <li style="aspect-ratio:0.87086092715232">1</li>
    <li style="aspect-ratio:0.63680387409201">2</li>
    <li style="aspect-ratio:1.5748502994012">3</li>
    <li style="aspect-ratio:0.7874251497006">4</li>
    <li style="aspect-ratio:0.63680387409201">5</li>
</ul>

这是我得到的：

我想要和期望的是一个坚实布局：

我不明白为什么除了前两行之外，接下来的行都比严格要求的内容高。我对网格布局的理解还不是很好。我在列表的

fit-content

和项目的

min-content

属性中摸索了

grid-template-rows

和

height

，但没有成功。

我的问题与那个问题非常相似，但它很旧并且没有给出解决方案。

有没有办法获得具有自动行高的实体布局？