display data in multiple columns with for loop - django

Question

I'm sure this is a simple answer but for the life of me I cant figure / find out how to go about this.
I want to display blog posts from my data base in three equal columns.
When I start looking into the bootstrap docs this is the code given.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
However If I go to implement it I dont understand how i would be able to put the for loop on it without it repeating everything 3 times. IE:
{% for post in posts.all %}
<div class="row">
<div class="col-sm">
<img class="post-image" src="{{ post.image.url }}" />
</div>
<div class="col-sm">
<img class="post-image" src="{{ post.image.url }}" />
</div>
<div class="col-sm">
<img class="post-image" src="{{ post.image.url }}" />
</div>
</div>
{% endfor %}
If you could please point me in the right direction on how to go about this it would be very much appreciated bootstrap is not a requirement.

Answer 1

The view should "prepare" the data to make it easy to enumerate over this. We can create chunks with:
def some_view(request):
posts = list(Post.objects.all())
posts = [posts[i:i+3] for i in range(0, len(posts), 3)]
return render(request, 'some-template.html', {'products': products})
in the template we can then work with a double {% for … %}…{% endfor %} loop [Django-doc]:
{% for chunk in posts %}
<div class="row">
{% for post in chunk %}
<div class="col-sm">
<img class="post-image" src="{{ post.image.url }}" />
</div>
{% endfor %}
</div>
{% endfor %}