<p>Decided on Javascript for my solution on this one rather than twig. Reasons being that my entries still held their order in the markup and I can adjust to 2 columns if needs be for responsive breakpoint</p>

<pre><code>{% set entries = craft.entries.section('projects').all() %}


&lt;div id="columns"&gt;
    {% for entry in entries %}
    &lt;li&gt;
        &lt;h2&gt;{{ entry.title }}&lt;/h2&gt;
    &lt;/li&gt;
    {% endfor %}
&lt;/div&gt;


&lt;script&gt;

$(function(){
    var first = $('&lt;ul/&gt;').addClass('box').addClass('first-column';
    var mid = $('&lt;ul/&gt;').addClass('box').addClass('second-column');
    var last = $('&lt;ul/&gt;').addClass('box').addClass('third-column');

    var fElems = $('#columns li:nth-child(3n+1)');
    var mElems = $('#columns li:nth-child(3n+2)');
    var lElems = $('#columns li:nth-child(3n+3)');

    fElems.appendTo(first);
    mElems.appendTo(mid);
    lElems.appendTo(last);

    $('#columns').append(first,mid,last);
});
&lt;/script&gt;
</code></pre>

CC BY-SA 4.0
2019-05-13T15:22:08.597Z
2019-05-13T15:22:08.597Z
John Henry Donovan
<p>I tried a simple solution using javascript, you can translate the code into twig looping. I hope it helps.</p>

<pre class="lang-js prettyprint-override"><code>const posts = [1,2,3,4,5,6,7,8,9,10,11,12];
const colNum = 3;
const rowNum = posts.length/colNum;

for (i=0 ; i&lt;rowNum ; i++) {
 const row = [];
 for (j=0; j&lt;colNum; j++) {
   row.push(posts[(i*colNum) + j]);
 }
 console.log(row)
 console.log('----')
}
</code></pre>

<p>output : </p>

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

<hr>

<p>improve solution using twig</p>

<p>@JohnHenryDonovan ah sorry, I didn't notice the batch filter. Why don't you sort the entries first, then batch them?</p>

<p>I assume you use bootstrap as CSS lib, then you can apply d-flex on each row.</p>

<pre><code>{% set projects = craft.entries()
      .section('project')
      .orderBy('postDate desc')
      .all() %}

{% set grouped = projects|batch(3) %}
{% for row in grouped %}
   &lt;div class="d-flex"&gt;
   {% for column in row %}
      &lt;div class="item-{{loop.index}}"&gt;
         &lt;!-- render your item here --&gt;
      &lt;/div&gt;
   {% endfor %}
   &lt;/div&gt;
{% endfor %}
</code></pre>

<p>The output of the code above </p>

<pre><code>&lt;div class="d-flex"&gt;
  &lt;div class="item-1"&gt; ... &lt;/div&gt;
  &lt;div class="item-2"&gt; ... &lt;/div&gt;
  &lt;div class="item-3"&gt; ... &lt;/div&gt;
&lt;/div&gt;
&lt;div class="d-flex"&gt;
  &lt;div class="item-1"&gt; ... &lt;/div&gt;
  &lt;div class="item-2"&gt; ... &lt;/div&gt;
  &lt;div class="item-3"&gt; ... &lt;/div&gt;
&lt;/div&gt;
&lt;div class="d-flex"&gt;
  &lt;div class="item-1"&gt; ... &lt;/div&gt;
  &lt;div class="item-2"&gt; ... &lt;/div&gt;
  &lt;div class="item-3"&gt; ... &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>jsfiddle HTML output <a href="http://jsfiddle.net/30k9ndg6/3/" rel="nofollow noreferrer">http://jsfiddle.net/30k9ndg6/3/</a></p>

CC BY-SA 4.0
2019-05-13T08:33:29.803Z
Wouldn't this just be the same as `batch`? 


`{% set columns = projects|batch(3) %}`


I need to figure out how to get the following essentially using your JS as an example


`const posts = [1,4,7,10,2,5,8,11,3,6,9,12];`
John Henry Donovan
CC BY-SA 4.0
2019-05-13T09:31:16.117Z
I think Im gonna go Javascript route in this. It will keep my entry list clean and allow me to adjust columns in mobile. Similar to http://jsfiddle.net/UrVsR/1/
John Henry Donovan
CC BY-SA 4.0
2019-05-13T10:30:26.153Z
@JohnHenryDonovan see my updated answer above
Dzulfikar Adi Putra
CC BY-SA 4.0
2019-05-13T15:08:53.920Z
Thanks but that wont work. See my original diagram  That will just flow entries into 3 columns like col1 - 1,2,3,4 col2 -  5,6,7,8, col3 - 9,10,11,12. I have it working now with JS though
John Henry Donovan
CC BY-SA 4.0
2019-05-13T00:04:35.207Z
2019-05-13T15:47:04.113Z
2019-05-13T15:47:04.113Z
Dzulfikar Adi Putra
<p>I'm looking for some help with the most efficient and performant way to generate this loop.</p>

<pre><code>| COL 1 | COL 2 | COL 3 |
|   1   |   2   |   3   |
|   4   |   5   |   6   |
|   7   |   8   |   9   |
|   10  |   11  |   12  |
</code></pre>

<p>Columns here are unordered lists and I want to ordered by postDate going across each column. It needs to be done this way as specific to the design of the page. </p>

<p>I've tried <code>batch</code>, <code>slice</code> , loop indexes and experimented with range. Tried 3 different craft.entries loops to generate the columns.</p>

<p>What I would really need if it existed was <code>offset</code> and <code>nth</code> if <code>nth</code> didn't terminate.</p>

<p>I'm guessing answer will be something like creating these arrays outside of final entries loop and passing in IDs?</p>

<templating><loop>
Creating entries loop with nth loops across unordered lists
# Creating entries loop with nth loops across unordered lists

(Asked by: username_0 on 2019-05-12)

I'm looking for some help with the most efficient and performant way to generate this loop.
| COL 1 | COL 2 | COL 3 |
|   1   |   2   |   3   |
|   4   |   5   |   6   |
|   7   |   8   |   9   |
|   10  |   11  |   12  |

Columns here are unordered lists and I want to ordered by postDate going across each column. It needs to be done this way as specific to the design of the page. 
I've tried batch, slice , loop indexes and experimented with range. Tried 3 different craft.entries loops to generate the columns.
What I would really need if it existed was offset and nth if nth didn't terminate.
I'm guessing answer will be something like creating these arrays outside of final entries loop and passing in IDs?

**Tags:** templating, loop

---

## 2 answers

### Answer by username_0 on 2019-05-13. Score: 1 | Accepted answer

Decided on Javascript for my solution on this one rather than twig. Reasons being that my entries still held their order in the markup and I can adjust to 2 columns if needs be for responsive breakpoint
{% set entries = craft.entries.section('projects').all() %}



    {% for entry in entries %}
    
        {{ entry.title }}
    
    {% endfor %}


---

### Answer by username_1 on 2019-05-13. Score: 2

I tried a simple solution using javascript, you can translate the code into twig looping. I hope it helps.
const posts = [1,2,3,4,5,6,7,8,9,10,11,12];
const colNum = 3;
const rowNum = posts.length/colNum;

for (i=0 ; i
output : 


improve solution using twig
@JohnHenryDonovan ah sorry, I didn't notice the batch filter. Why don't you sort the entries first, then batch them?
I assume you use bootstrap as CSS lib, then you can apply d-flex on each row.
{% set projects = craft.entries()
      .section('project')
      .orderBy('postDate desc')
      .all() %}

{% set grouped = projects|batch(3) %}
{% for row in grouped %}
   
   {% for column in row %}
      
         
      
   {% endfor %}
   
{% endfor %}

The output of the code above 

   ... 
   ... 
   ... 


   ... 
   ... 
   ... 


   ... 
   ... 
   ... 


jsfiddle HTML output http://jsfiddle.net/30k9ndg6/3/

> **Comments:**
> **username_0**: Wouldn't this just be the same as `batch`?    `{% set columns = projects|batch(3) %}`   I need to figure out how to get the following essentially using your JS as an example   `const posts = [1,4,7,10,2,5,8,11,3,6,9,12];`  
> **username_0**: I think Im gonna go Javascript route in this. It will keep my entry list clean and allow me to adjust columns in mobile. Similar to http://jsfiddle.net/UrVsR/1/  
> **username_1**: @JohnHenryDonovan see my updated answer above  
> **username_0**: Thanks but that wont work. See my original diagram  That will just flow entries into 3 columns like col1 - 1,2,3,4 col2 -  5,6,7,8, col3 - 9,10,11,12. I have it working now with JS though  

---

