Attempting to create a complicated grid layout with batch I'm trying to create the following layout using batch, but I can't quite get it right...



This is how far I've gotten:

{% for entry in items|batch(3) %}
   &lt;div class="row rowDivider"&gt;
     {% if loop.index is divisible by(5) or loop.index == 1 %}

        {% for batch in entry[0:3]   %}
          {% if loop.index == 1 %}
              &lt;div class="big"&gt;{{batch}}&lt;/div&gt;
          {% elseif loop.index == 2 %}
              &lt;div class="big-top"&gt;{{batch}}&lt;/div&gt;
          {% else %}
              &lt;div class="big-bottom"&gt;{{batch}}&lt;/div&gt;
          {% endif %}
        {% endfor %}

      {% elseif loop.index is divisible by(2) %}

        {% for batch in entry[0:2] %}
          {% if loop.index == 1 %}
             &lt;div class="big-left"&gt;{{batch}}&lt;/div&gt;
          {% else %}
             &lt;div class="small-right"&gt;{{batch}}&lt;/div&gt;
          {% endif %}
        {% endfor %}

      {% elseif loop.index is divisible by(3) %}

        {% for batch in entry[0:3] %}
          {% if loop.index == 1 %}
             &lt;div class="small-left"&gt;{{batch}}&lt;/div&gt;
          {% elseif loop.index == 2 %}
             &lt;div class="small-middle"&gt;{{batch}}&lt;/div&gt;
          {% else %}
             &lt;div class="small-right"&gt;{{batch}}&lt;/div&gt;
          {% endif %}
        {% endfor %}

    {% endif %}
  &lt;/div&gt;
{% endfor %}


Json used:

{ "items": ["1" , "2", "3", "4", "5" , "6", "7", "8","9" , "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22" ] }


Any help will be much appreciated.
I think I got it. Here's what I did:

{% for entry in items|batch(10) %}
&lt;div class="set"&gt;

    {% for batch in entry[0:3] %}
        {% if loop.index == 1 %}
        &lt;div class="rowOne"&gt;
          &lt;div class="big"&gt;{{batch}}&lt;/div&gt;
        {% elseif loop.index == 2 %}
          &lt;div class="big-top"&gt;{{batch}}&lt;/div&gt;
        {% elseif loop.index == 3 %}
          &lt;div class="big-bottom"&gt;{{batch}}&lt;/div&gt;
        &lt;/div&gt;
        {% endif %}
    {% endfor %}

    {% for batch in entry[3:2] %}
      {% if loop.index == 1 %}
        &lt;div class="rowTwo"&gt;
          &lt;div class="big-left"&gt;{{batch}}&lt;/div&gt;
      {% elseif loop.index == 2 %}
          &lt;div class="small-right"&gt;{{batch}}&lt;/div&gt;
        &lt;/div&gt;
      {% endif %}
    {% endfor %}

    {% for batch in entry[5:3] %}
      {% if loop.index == 1 %}
        &lt;div class="rowThree"&gt;
          &lt;div class="small-left"&gt;{{batch}}&lt;/div&gt;
      {% elseif loop.index == 2 %}
          &lt;div class="small-middle"&gt;{{batch}}&lt;/div&gt;
      {% elseif loop.index == 3 %}
          &lt;div class="small-right"&gt;{{batch}}&lt;/div&gt;
        &lt;/div&gt;
      {% endif %}
    {% endfor %}

    {% for batch in entry[8:2] %}
      {% if loop.index == 1 %}
      &lt;div class="rowFour"&gt;
        &lt;div class="small-left"&gt;{{batch}}&lt;/div&gt;
      {% elseif loop.index == 2 %}
        &lt;div class="big-right"&gt;{{batch}}&lt;/div&gt;
      &lt;/div&gt;
      {% endif %}
    {% endfor %}

&lt;/div&gt;
{% endfor %}