title: Jinja2: Create new row for every 3 items
body: <p>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 once that limit has been reached. How can I best implement this?</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>{% extends "base.html" %}
  {% block content %}
  &lt;div class="container-fluid"&gt;
    &lt;legend&gt;&lt;/legend&gt;
    &lt;div class="row-fluid" id="main"&gt;
        {% for article in articles %}
        &lt;div class="span4"&gt;
            &lt;div class="thumbnail"&gt;
                &lt;a href="{{ article.url }}"&gt;&lt;img src="http://placehold.it/300x150/483CB4"&gt;&lt;/a&gt;
                &lt;div class="caption"&gt;
                    &lt;h4&gt;&lt;a href="{{ article.url }}"&gt;{{ article.title }}&lt;/a&gt;&lt;/h4&gt;
                    &lt;p&gt; {{ article.summary }}&lt;/p&gt;
                &lt;/div&gt;
                &lt;legend&gt;&lt;/legend&gt;
                &lt;a class="btn" href="#"&gt;&lt;i class="icon-thumbs-up"&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;a class="btn" href="#"&gt;&lt;i class="icon-thumbs-down"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        {% endfor %}
    &lt;/div&gt;
  &lt;/div&gt;
  {% endblock %}
  </code></pre>
  
  <p>Goal:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="span4"&gt;article[0]&lt;/div&gt;
    &lt;div class="span4"&gt;article[1]&lt;/div&gt;
    &lt;div class="span4"&gt;article[2]&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="span4"&gt;article[3]&lt;/div&gt;
    &lt;div class="span4"&gt;article[4]&lt;/div&gt;
    &lt;div class="span4"&gt;article[5]&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>