Efficient way to pass list to template for bootstrap grid - flask

Question

What is the best practice to pass data from routes to template so that it doesn't break the template?
I have a template that uses bootstrap grid that is N rows by 3 columns.
Currently I am calculating the number of rows required in routes, and passing a list to the template to iterate through using Jinja2. I am doing this because I can't seem to import Math in the template, or perform some of the basic python operations like len(mylist)
As a result of this "hack", I have to identify the elements using 3*row + i. It works, but this hard-coding is triggering my OCD!
Can any more seasoned developers share what you would do for such cases?
#app.route('grid')
def grid():
items = Items.query.all()
items_row = list(range(0, ceil(len(items)/3) )) # Because I cannot round-up on Jinja2
...
return render_template('grid.html', items=items, item_rows=item_rows)
{% for row in item_rows %}
{% if 3*row + 0 < items|length %}
<div class="row">
<div class="col-lg-4">
<a href="{{ url_for('item', id=items[3*row + 0].id) }}"
<h1>{{ items[3*row + 0].header }}</h1>
</a>
<a href="{{ url_for('item', id=items[3*row + 0].id) }}"
<p>{{ items[3*row + 0].body }}</p>
</a>
</div>
</div>
{% endif %}
{% if 3*row + 1 < items|length %}
<div class="row">
<div class="col-lg-4">
<a href="{{ url_for('item', id=items[3*row + 1].id) }}"
<h1>{{ items[3*row + 1].header }}</h1>
</a>
<a href="{{ url_for('item', id=items[3*row + 1].id) }}"
<p>{{ items[3*row + 1].body }}</p>
</a>
</div>
</div>
{% endif %}
{% if 3*row + 2 < items|length %}
<div class="row">
<div class="col-lg-4">
<a href="{{ url_for('item', id=items[3*row + 2].id) }}"
<h1>{{ items[3*row + 2].header }}</h1>
</a>
<a href="{{ url_for('item', id=items[3*row + 2].id) }}"
<p>{{ items[3*row + 2].body }}</p>
</a>
</div>
</div>
{% endif %}

Answer 1

I've refactored my code:
It is much more concise now
It is also much harder to read / understand
{% set rows = 3 %}
{% set cols = 3 %}
{% for item in items %}
{% if loop.index0 // rows != (loop.index0 - 1) // rows %}
<div class="row">
{% endif %}
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<a href="{{ url_for('item.html', id=item.id) }}">
<h1>{{ item.header }}<h1>
</a>
<p>{{ item.body }}</p>
</div>
{% if loop.index0 % cols == 2 %}
</div>
{% endif %}
{% endfor %}