Jinja2: Create new row for every 3 items

Question

Currently for every article in articles a new div with class span4 is created. Instead for each row I would like to limit it\'s content to three span\'s and create a new row on

Answer 1

You can use loop.index0 and loop.last inside the for loop. Here is the for-loop documentation.

Example:

{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
  <legend></legend>
  <div class="row-fluid" id="main">
      {% for article in articles %}
      {% if loop.index0 % 3 == 0 %}
      <div class="row">
      {% endif %}
          <div class="span4">
              ...
          </div>
      {% if loop.index0 % 3 == 2 or loop.last %}
      </div>
      {% endif %}
      {% endfor %}
  </div>
</div>
{% endblock %}

The loop.last clause should close the last row even if there were less than 3 items. <div> should start when loop.index0 gives 0 as the remainder and should end when 2 is the remainder

Another alternative would be to group the items into rows before passing them into the template, then you can just issue two for-loops one inside the other.

Answer 2

The best way to do this is to use the built in batch filter to break up your list into groups of three:

{% for article_row in articles | batch(3, ' ') %}
<div class="row">
    {% for article in article_row %}
    <div class="span4">{{ article }}</div>
    {% endfor %}
</div>
{% endfor %}