For-looping по три столбца в строке в шаблоне Django

Я пытаюсь получить данные из базы данных и отобразить их в виде строк из трех столбцов. Я перепробовал столько методов, сколько смог найти, в итоге рендеринг получился с таким кодом:

    <div class='container'>
        <div class="row">
        {% for category in categories %}
        {% if not forloop.counter0|divisibleby:"3" %}
            <div class="col-6 col-md-4">
                <h3>{{category.category_name}}</h3>
                {% for page in category.page_set.all %}
                <p>{{page.page_title}}</p>                 
                {% endfor %}
            </div>  
        {% else %}
        <div class="row">
            <div class="col-6 col-md-4">
                <h3>{{category.category_name}}</h3>
                {% for page in category.page_set.all %}
                <p>{{page.page_title}}</p>                 
                {% endfor %}
            </div> 
        {% endif %} 
        {% endfor %}
    </div>

Он отображает элементы в три колонки, но колонки не выровнены, и при проверке HTML, класс 'row' одинаков для всех строк (давая ему id и проверяя с помощью CSS), так что я думаю, что есть что-то, что я делаю неправильно.

Я хотел бы получить вывод типа:

Категория1 - Категория2 - Категория3

Категория4 - Категория5 - Категория6

С объектами 'page' каждой категории под ними.

Данные отображаются нормально, представление простое (просто получение всех объектов категории). Мне просто нужно, чтобы данные рендерились в разных строках по 3 столбца. Я пробовал метод divisibleby, но, похоже, я все еще что-то упускаю. Какой подход был бы лучшим?

< 
<section class="bg-light appear-animation h-100" data-appear-animation="fadeIn">
    <div class='container'>
        <div class="row">
        {% for category in categories %}
        {% if forloop.counter0|divisibleby:"3" %}
        </div>
        <div class="row">
            <div class="col-6 col-md-4">
                <h3>{{category.category_name}}</h3>
                {% for page in category.page_set.all %}
                <p>{{page.page_title}}</p>                 
                {% endfor %}
            </div>  
        {% else %}
            <div class="col-6 col-md-4">
                <h3>{{category.category_name}}</h3>
                {% for page in category.page_set.all %}
                <p>{{page.page_title}}</p>                 
                {% endfor %}
            </div> 
        {% endif %} 
        {% endfor %}
    </div>
</section>

Вы должны использовать counter0 в if вокруг тега open row div. Затем вы должны использовать счетчик в теге if вокруг div закрытой строки. Потому что counter0 начинается с 0, а counter начинается с 1. Таким образом, новый тег row div открывается на 0, 3, 9, 12. А созданный тег row div закрывается на 2, 5, 8, 11.

<div class='container'>
{% for category in categories %}
{% if not forloop.counter0|divisibleby:"3" %}
<div class="row">
{% endif %} 
    <div class="col-6 col-md-4">
        <h3>{{category.category_name}}</h3>
        {% for page in category.page_set.all %}
        <p>{{page.page_title}}</p>                 
        {% endfor %}
    </div>  
{% if not forloop.counter|divisibleby:"3" %}
</div> 
{% endif %} 
{% endfor %}
Вернуться на верх