Creating entries loop with nth loops across unordered lists 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?
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&lt;rowNum ; i++) {
 const row = [];
 for (j=0; j&lt;colNum; j++) {
   row.push(posts[(i*colNum) + j]);
 }
 console.log(row)
 console.log('----')
}


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 %}
   &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 %}


The output of the code above 

&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;


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