django template rows of multiple items

Question

I'm creating a catalogue, where there is a list of items of undefined length. I want to spit it out in rows with three columns each. So I have the following html:

<div class="row">
    <div class="three columns">item 1
    </div>
    <div class="three columns">item 2
    </div>
    <div class="three columns">item 3
    </div>
</div>
<div class="row">
    <div class="three columns">item 4
    </div>
    <div class="three columns">item 5
    </div>
    <div class="three columns">item 6
    </div>
</div>

I'm stuck as to how I can implement this as a django template? How can I split it up so that a new row starts after three items?

score 46 · Accepted Answer · answered Oct 24 '12 at 11:19

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>

answered Oct 24 '12 at 11:19

jpic

32,891
5
112
113

Ouch, I'm too late with the same answer – Igor Oct 24 '12 at 11:24
Fantastic - that's perfect. I didn't know about the divisibleby option - I'll look more into the documentation. – babbaggeii Oct 24 '12 at 11:35
Won't this break if you happen to have a row with less than three items? The `divisibleby:3` won't be met for that row, and you'll be missing a closing ``. I think the solution that creates sublists is more stable. – Nathan Jones Oct 06 '17 at 17:11
You saved my day :* – Melek Yilmaz Jan 24 '18 at 09:34

pistache · Answer 2 · 2012-10-24T11:32:25.537

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 %}

edited Oct 24 '12 at 11:32

answered Oct 24 '12 at 11:21

pistache

5,782
1
29
50

1

There is a set of more flexible ways to split list into list of lists here - http://stackoverflow.com/questions/312443/how-do-you-split-a-list-into-evenly-sized-chunks-in-python – Igor Oct 24 '12 at 11:27

score 4 · Answer 3 · answered Oct 24 '12 at 11:23

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 %}

score 1 · Answer 4 · answered Jun 17 '17 at 06:05

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.

django template rows of multiple items

4 Answers4

Linked

Related