Попытка выложить переменное количество карт в ряд с помощью Django и Bootstrap

У меня есть переменное количество элементов на карточках Bootstrap, которые я буду выкладывать (может быть, 100). Я хочу расположить их так, чтобы в каждой строке помещалось столько элементов, сколько поместится (предположим, фиксированной ширины).

На большом экране я должен получить

| 1 2 3 4 |

На меньшее:

| 1 2 | | 3 4 |

Я перебираю элементы с помощью цикла for в шаблоне Django.

Все методы, которые я нашел, предполагают, что сервер будет иметь заданное количество столбцов в строке. Для меня это не имеет смысла, так как я хочу установить размер для удобства чтения (например, 20em), а затем поместить в строку столько элементов, сколько поместится.

Вот что у меня есть, это не работает.

<div class="container-fluid">
    <div class="row">
        {% for person in people %}
            <div class="row">
                <div class="card width=25%">
                    <img class="teacher-pic card-img-top" style="float:left;  margin: 0 15px 0 0;"
                         src="{{ person.person_photo_url }}"/>
                    <div class="card-body">
                        <h5 class="card-title">{{ person.person_name }}</h5>
                        <p class="card-text">{{ person.person_description }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

Вернуться на верх