django template rows of multiple items
10,697
Solution 1
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>
Solution 2
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 %}
Solution 3
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 %}
Solution 4
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.
Related videos on Youtube
Author by
babbaggeii
Updated on September 15, 2022Comments
-
babbaggeii over 1 year
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?
-
Igor over 11 yearsThere is a set of more flexible ways to split list into list of lists here - stackoverflow.com/questions/312443/…