<p>I think I got it. Here's what I did:</p>

<pre><code>{% 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 %}
</code></pre>

CC BY-SA 3.0
2017-08-01T15:22:47.737Z
Had the same problem but yes the solutions is just making the batch bigger. 
https://craftcms.stackexchange.com/questions/19179/making-an-entry-grid-with-batch-2-3-2-in-row-then-3-in-row
Justin Dekkers
CC BY-SA 3.0
2017-08-01T06:35:26.377Z
2017-08-01T06:35:26.377Z
erich
<p>I'm trying to create the following layout using batch, but I can't quite get it right...</p>

<h2><a href="https://i.sstatic.net/FOSGC.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/FOSGC.png" alt="enter image description here"></a></h2>

<p>This is how far I've gotten:</p>

<pre><code>{% 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 %}
</code></pre>

<p>Json used:</p>

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

<p>Any help will be much appreciated.</p>

<loop><batch>
Attempting to create a complicated grid layout with batch
# Attempting to create a complicated grid layout with batch

(Asked by: username_0 on 2017-08-01)

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) %}
   
     {% if loop.index is divisible by(5) or loop.index == 1 %}

        {% for batch in entry[0:3]   %}
          {% if loop.index == 1 %}
              {{batch}}
          {% elseif loop.index == 2 %}
              {{batch}}
          {% else %}
              {{batch}}
          {% endif %}
        {% endfor %}

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

        {% for batch in entry[0:2] %}
          {% if loop.index == 1 %}
             {{batch}}
          {% else %}
             {{batch}}
          {% endif %}
        {% endfor %}

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

        {% for batch in entry[0:3] %}
          {% if loop.index == 1 %}
             {{batch}}
          {% elseif loop.index == 2 %}
             {{batch}}
          {% else %}
             {{batch}}
          {% endif %}
        {% endfor %}

    {% endif %}
  
{% 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.

**Tags:** loop, batch

---

## 1 answers

### Answer by username_0 on 2017-08-01. Score: 1

I think I got it. Here's what I did:
{% for entry in items|batch(10) %}


    {% for batch in entry[0:3] %}
        {% if loop.index == 1 %}
        
          {{batch}}
        {% elseif loop.index == 2 %}
          {{batch}}
        {% elseif loop.index == 3 %}
          {{batch}}
        
        {% endif %}
    {% endfor %}

    {% for batch in entry[3:2] %}
      {% if loop.index == 1 %}
        
          {{batch}}
      {% elseif loop.index == 2 %}
          {{batch}}
        
      {% endif %}
    {% endfor %}

    {% for batch in entry[5:3] %}
      {% if loop.index == 1 %}
        
          {{batch}}
      {% elseif loop.index == 2 %}
          {{batch}}
      {% elseif loop.index == 3 %}
          {{batch}}
        
      {% endif %}
    {% endfor %}

    {% for batch in entry[8:2] %}
      {% if loop.index == 1 %}
      
        {{batch}}
      {% elseif loop.index == 2 %}
        {{batch}}
      
      {% endif %}
    {% endfor %}


{% endfor %}

> **Comments:**
> **username_1**: Had the same problem but yes the solutions is just making the batch bigger.  https://craftcms.stackexchange.com/questions/19179/making-an-entry-grid-with-batch-2-3-2-in-row-then-3-in-row  

---

