为什么 grid-auto-flow:dense 在 CSS 中不起作用

Question

我创建了一个图片库。但是当我想密度所有的盒子时，它不起作用。 为什么？

我的风格：

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: 150px;
    grid-gap: 10px;
    grid-auto-flow: dense !important;// this line.
}

.item {
    padding: 50px;
    border-radius: 10px;
    border: 1px solid #ddd
}

.vertical {
    grid-row: auto/span 2;
}

.horizantal {
    grid-column: auto/span 2;
}

.squar {
    grid-row: auto/span 2;
    grid-column: auto/span 2;
}

我的 html :

<div class="container">
    <div class="item vertical" style="background-color: red;"></div>
    <div class="item" style="background-color: aliceblue;"></div>
    <div class="item horizantal" style="background-color: antiquewhite;"></div>
    <div class="item" style="background-color: aquamarine;"></div>
    <div class="item squar" style="background-color: azure;"></div>
    <div class="item" style="background-color: beige;"></div>
    <div class="item vertical" style="background-color: bisque;"></div>
    <div class="item" style="background-color: black;"></div>
</div>

Stackblitz 在这里

我哪里错了？