CSS Grid自动流：密集；使用Django动态加载的数据

Question

我有一个Django Web应用程序，该应用程序动态生成列，每列中包含不同数量的项目。我正在尝试获取CSS的grid-auto-flow：密集；填补空白，但我无法使其正常工作。

这是HTML结构：

<div class="container" id="app">
    <div class="header">header</div>
    <div class="columns">
        {% for color, cards in cards_dict.items %}
            <div class="column">
                <h1>{{ color }}</h1>
                {% for card in cards %}
                    <div class="card">
                        {% if card in card_filter.qs %}
                            <p>{{ card.rating }}</p>{{ card.name }}
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        {% endfor %}
    </div>
    <div class="footer">footer</div>
</div>

这是我到目前为止拥有的CSS代码：

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-rows: 50px 1fr 100px;
    grid-template-columns: 1fr;
}

.columns {
    display: grid;
    background: mistyrose;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: minmax(150px, auto);
}

.column {
}

.card {
    font-size: 16px;
    border: 5px solid rgba(0, 0, 0, 0.03);
}

这是当前生成的内容：

我希望各列相互对齐，且之间几乎没有/没有间距。例如，在上图中，我希望Azorius列位于4.0 Tatyova Benthic Druid卡的正下方。