[Fixed]-Django template rows of multiple items

by

46👍

✅

Try something like this:

<div class="row">
{% for item in items %}
    <div class="three columns">{{ item }}
    </div>
    {% if forloop.counter|divisibleby:3 %}
</div>
<div class="row">
    {% endif %}
{% endfor %}
</div>
👤jpic

5👍

You could try to create a custom template filter, that would return a list of list of 3-items.

Quick attempt :

@register.filter
def splitByThree(data):
    return [l[i:i+3] for i in range(0, len(l), 3)]

And then in your template :

{% load splitByThree %}

{% for list in data|splitByThree %}
<div class="row">
{% for item in list %}
<div class="three columns">{{ item }}</div>
{% endfor %}
</div>
{% endfor %}
👤pistache

4👍

You can use forloop.counter variable and divisibleby filter. The code will be close to this:

{% for item in items %}
    {% if forloop.first %}
        <div class="row">
    {% endif %}
    <div class="three columns">{{ item }}</div>
    {% if forloop.counter|divisibleby:"3" %}
        </div>
        {% if not forloop.last %}
            <div class="row">
        {% endif %}
    {% endif %}
    {% if forloop.last %}
         </div>
    {% endif %}
{% endfor %}
👤Igor

1👍

Sorry don’t have enough reputation to just comment jpic‘s answer(the accepted one), for Jinja2, use:

<div class="row">
{% for item in items %}
    <div class="three columns">{{ item }}
    </div>
    {% if loop.index is divisibleby(3) %}
</div>
<div class="row">
    {% endif %}
{% endfor %}
</div>

details are here.

👤hexcola

Leave a comment