Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-05-13T15:22:08.597Z
Answers.LastActivityDate: 2019-05-13T15:22:08.597Z
Answers.UserDisplayName: John Henry Donovan
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-05-13T08:33:29.803Z
Answers.Text: 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];`
Answers.UserDisplayName: John Henry Donovan
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-05-13T09:31:16.117Z
Answers.Text: 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/
Answers.UserDisplayName: John Henry Donovan
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-05-13T10:30:26.153Z
Answers.Text: @JohnHenryDonovan see my updated answer above
Answers.UserDisplayName: Dzulfikar Adi Putra
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-05-13T15:08:53.920Z
Answers.Text: 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
Answers.UserDisplayName: John Henry Donovan
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-05-13T00:04:35.207Z
Answers.LastActivityDate: 2019-05-13T15:47:04.113Z
Answers.LastEditDate: 2019-05-13T15:47:04.113Z
Answers.UserDisplayName: Dzulfikar Adi Putra
Body: <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>
  
Tags: <templating><loop>
Title: Creating entries loop with nth loops across unordered lists
ThreadText: # 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() %}
  
  <div id="columns">
      {% for entry in entries %}
      <li>
          <h2>{{ entry.title }}</h2>
      </li>
      {% endfor %}
  </div>
  
  <script>
  
  $(function(){
      var first = $('<ul/>').addClass('box').addClass('first-column';
      var mid = $('<ul/>').addClass('box').addClass('second-column');
      var last = $('<ul/>').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);
  });
  </script>
  
  ```
  
  
  ---
  
  ### 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.
  
  ```js
  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<rowNum ; i++) {
   const row = [];
   for (j=0; j<colNum; j++) {
     row.push(posts[(i*colNum) + j]);
   }
   console.log(row)
   console.log('----')
  }
  
  ```
  
  output :
  
  [![enter image description here](https://i.sstatic.net/HGnzg.png)](https://i.sstatic.net/HGnzg.png)
  
  ---
  
  improve solution using twig
  
  @username_0 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 %}
     <div class="d-flex">
     {% for column in row %}
        <div class="item-{{loop.index}}">
           <!-- render your item here -->
        </div>
     {% endfor %}
     </div>
  {% endfor %}
  
  ```
  
  The output of the code above
  
  ```
  <div class="d-flex">
    <div class="item-1"> ... </div>
    <div class="item-2"> ... </div>
    <div class="item-3"> ... </div>
  </div>
  <div class="d-flex">
    <div class="item-1"> ... </div>
    <div class="item-2"> ... </div>
    <div class="item-3"> ... </div>
  </div>
  <div class="d-flex">
    <div class="item-1"> ... </div>
    <div class="item-2"> ... </div>
    <div class="item-3"> ... </div>
  </div>
  
  ```
  
  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**: @username_0 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  
  
  ---
  
  