CSS Grid auto-flow: плотный;с данными, которые динамически загружаются с Django

Question

У меня есть веб-приложение Django, которое динамически генерирует столбцы с различным количеством элементов в каждом столбце.Я пытаюсь получить CSS 'grid-auto-flow: density;чтобы заполнить пробелы, но я не могу заставить его работать.

Вот структура 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);
}

Вот то, что это генерирует в данный момент:

Я бы хотел, чтобы столбцы находились прямо друг относительно друга,с небольшим / нет места между ними.Например, на изображении выше я бы хотел, чтобы столбец Азориуса находился прямо под картой 4.0 Татьева, бентический друид.