Answers.Body: <p>With some help from HendrikEng's answer I figured out something that does work.</p>
  
  <p>I had to make the batch bigger to an amount of 5 making the "row's" bigger. Also I had to set the position of the bigger block which always is the first or second of this batch so I could set this witha variable which changes if a new batch started.</p>
  
  <p>This is the finalcode which works perfect:</p>
  
  <pre><code>{% for entry in craft.entries.section('cases')|batch(5) %}
      &lt;!-- Set position for the bigger block --&gt;
      {% set bigBatchNr = 2 %}
      &lt;!-- Change position for the bigger block if the batch loop is even --&gt;
      {% if loop.index is even %}
          {% set bigBatchNr = 1 %}
      {% endif %}
  
      &lt;div class="row rowDivider"&gt;
          {% for batch in entry %}
              {% if loop.index == bigBatchNr %}
                  &lt;div class="col-md-8"&gt;
                      &lt;div class="caseGrid-item big-item"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              {% else %}
                  &lt;div class="col-md-4"&gt;
                      &lt;div class="caseGrid-item"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              {% endif %}
          {% endfor %}            
      &lt;/div&gt;
  {% endfor %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-27T14:04:54.837Z
Answers.LastActivityDate: 2017-02-27T14:04:54.837Z
Answers.UserDisplayName: Justin Dekkers
Answers.Body: <p>This is how I re-created <a href="http://www.newsweek.com/business" rel="nofollow noreferrer">Businessweek category page</a>. It's not perfect, but you can start from there:</p>
  
  <pre class="lang-html prettyprint-override"><code>{% paginate craft.entries.section('news').relatedTo(category).limit(17) as pageInfo, paginatedEntries %}
  {% set firstTwo = paginatedEntries|slice(0,2) %}
  {% set secondThree = paginatedEntries|slice(3,3) %}
  {% set lastFour = paginatedEntries|slice(6,10) %}
  
  &lt;div class="row sub-section-1"&gt;
      {# Batch of 2 columns #}
      {% for entry in firstTwo %}
          &lt;div class="col-lg-6"&gt;
              &lt;h2&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h2&gt;
              &lt;div class="summary"&gt;{{ entry.summary }}&lt;/div&gt;
          &lt;/div&gt;
      {% endfor %}
  &lt;/div&gt;
  &lt;div class="row sub-section-2"&gt;
      {# Batch of 3 columns #}
      {% for entry in secondThree %}
          &lt;div class="col-lg-6"&gt;
              &lt;h2&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h2&gt;
              &lt;div class="summary"&gt;{{ entry.summary }}&lt;/div&gt;
          &lt;/div&gt;
      {% endfor %}
  &lt;/div&gt;
  &lt;div class="row sub-section-3"&gt;
      {# Rest of entries #}
      {% for entry in lastFour %}
          &lt;article class="col-lg-12"&gt;
              &lt;h2&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h2&gt;
              &lt;div class="summary"&gt;{{ entry.summary }}&lt;/div&gt;
          &lt;/article&gt;
      {% endfor %}
  &lt;/div&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-27T01:14:15.920Z
Answers.LastActivityDate: 2018-03-02T15:41:44.017Z
Answers.LastEditDate: 2018-03-02T15:41:44.017Z
Answers.UserDisplayName: Richard Songo
Answers.Body: <p>I think a way to achieve this, is to use a loop. 
  If the pattern repeats after the third row, you could use odd or even.</p>
  
  <p>there might be a better way, </p>
  
  <p><a href="https://mijingo.com/blog/where-am-i-in-the-twig-loop" rel="nofollow noreferrer">https://mijingo.com/blog/where-am-i-in-the-twig-loop</a></p>
  
  <p>UPDATE i tested it, it kinda works but unfortunately it skips the 3rd item like that, as well as there still needs to be a solution for changing the first row layout every second loop  </p>
  
  <pre><code>{% for entry in items|batch(3) %}
   &lt;div class="row rowDivider"&gt;
     {% if loop.index is odd %}
       {% for batch in entry[0:2]   %}
         {% if loop.index == 1 %}
           &lt;div class="col-md-4"&gt;{{batch}}&lt;/div&gt;
         {% else %}
           &lt;div class="col-md-8"&gt;{{batch}}&lt;/div&gt;
         {% endif %}
       {% endfor %}
     {% else %}
       {% for batch in entry %}
           &lt;div class="col-md-4"&gt;4 item"&gt;{{batch}}&lt;/div&gt;
       {% endfor %}
     {% endif %}
  &lt;/div&gt;
  {% endfor %}
  </code></pre>
  
  <p>playground for testing : 
  <a href="http://twig.stapps.io/" rel="nofollow noreferrer">http://twig.stapps.io/</a></p>
  
  <p>json i used : </p>
  
  <pre><code>{ "items": ["1" , "2", "3", "4", "5" , "6", "7", "8","9" , "10", "11", "12" ] }
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-27T12:27:21.580Z
Answers.Text: for the second loop and its repeating 'cold-md-4' element u could use batch to keep your code more dry.
Answers.UserDisplayName: HendrikEng
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-27T12:30:19.607Z
Answers.Text: This wouldn't work because it will throw in a "row" every time it re-loop to show an entry
Answers.UserDisplayName: Justin Dekkers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-27T12:39:15.480Z
Answers.Text: and if u would serve the content from a table and change for block to for row?
Answers.UserDisplayName: HendrikEng
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-27T13:25:13.323Z
Answers.Text: I can't keep doing the `{% if loop.index == x %}` as I would have to keep editing the code everytime we add something. It just cant work like that. I figured out all I need is odd batches should add 2 entries and even batches should add 3 entries.
Answers.UserDisplayName: Justin Dekkers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-27T13:29:48.430Z
Answers.Text: i just realized its not very effective, if u wouldn't change the position of the columns in the third row, u could loop with odd and even. sorry you are right , thought its the right direction.
Answers.UserDisplayName: HendrikEng
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-27T12:25:53.077Z
Answers.LastActivityDate: 2017-02-27T14:43:38.530Z
Answers.LastEditDate: 2017-02-27T14:43:38.530Z
Answers.UserDisplayName: HendrikEng
Body: <p>I'm trying to make a News item grid. I'm looking for a solution to output 2 type of "rows". One that shows 2 entries and the other shows 3 entries.
  I tried playing around with batches already but can't really manage to get it working alright. Is batch the right filter to use? If not what should I try using?</p>
  
  <p>It should look like this:</p>
  
  <p><a href="https://i.sstatic.net/ETj3I.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ETj3I.png" alt="enter image description here"></a></p>
  
  <p>Twigless code looks like this:</p>
  
  <pre><code>&lt;!-- Begin row type 1 --&gt;
      &lt;div class="row rowDivider"&gt;
          &lt;div class="col-md-4"&gt;
              &lt;div class="caseGrid-item"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-8"&gt;
              &lt;div class="caseGrid-item big-item"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End row type 1 --&gt;
      &lt;!-- Begin row type 2 --&gt;
      &lt;div class="row rowDivider"&gt;
          &lt;div class="col-md-4"&gt;
              &lt;div class="caseGrid-item"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;div class="caseGrid-item"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;div class="caseGrid-item"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End row type 2 --&gt;
      &lt;!-- Begin row type 1 --&gt;
      &lt;div class="row rowDivider"&gt;
          &lt;div class="col-md-8"&gt;
              &lt;div class="caseGrid-item big-item"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;div class="caseGrid-item"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End row type 1 --&gt;
  </code></pre>
  
Tags: <entries><forloop><bootstrap-craft>
Title: Making an entry grid with Batch 2,3 (2 in row then 3 in row)
ThreadText: # Making an entry grid with Batch 2,3 (2 in row then 3 in row)
  
  (Asked by: username_0 on 2017-02-27)
  
  I'm trying to make a News item grid. I'm looking for a solution to output 2 type of "rows". One that shows 2 entries and the other shows 3 entries.
  I tried playing around with batches already but can't really manage to get it working alright. Is batch the right filter to use? If not what should I try using?
  
  It should look like this:
  
  [![enter image description here](https://i.sstatic.net/ETj3I.png)](https://i.sstatic.net/ETj3I.png)
  
  Twigless code looks like this:
  
  ```
  <!-- Begin row type 1 -->
      <div class="row rowDivider">
          <div class="col-md-4">
              <div class="caseGrid-item">
  
              </div>
          </div>
          <div class="col-md-8">
              <div class="caseGrid-item big-item">
  
              </div>
          </div>
      </div>
      <!-- End row type 1 -->
      <!-- Begin row type 2 -->
      <div class="row rowDivider">
          <div class="col-md-4">
              <div class="caseGrid-item">
  
              </div>
          </div>
          <div class="col-md-4">
              <div class="caseGrid-item">
  
              </div>
          </div>
          <div class="col-md-4">
              <div class="caseGrid-item">
  
              </div>
          </div>
      </div>
      <!-- End row type 2 -->
      <!-- Begin row type 1 -->
      <div class="row rowDivider">
          <div class="col-md-8">
              <div class="caseGrid-item big-item">
  
              </div>
          </div>
          <div class="col-md-4">
              <div class="caseGrid-item">
  
              </div>
          </div>
      </div>
      <!-- End row type 1 -->
  
  ```
  
  **Tags:** entries, forloop, bootstrap-craft
  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_0 on 2017-02-27. Score: 2 | Accepted answer
  
  With some help from username_2's answer I figured out something that does work.
  
  I had to make the batch bigger to an amount of 5 making the "row's" bigger. Also I had to set the position of the bigger block which always is the first or second of this batch so I could set this witha variable which changes if a new batch started.
  
  This is the finalcode which works perfect:
  
  ```
  {% for entry in craft.entries.section('cases')|batch(5) %}
      <!-- Set position for the bigger block -->
      {% set bigBatchNr = 2 %}
      <!-- Change position for the bigger block if the batch loop is even -->
      {% if loop.index is even %}
          {% set bigBatchNr = 1 %}
      {% endif %}
  
      <div class="row rowDivider">
          {% for batch in entry %}
              {% if loop.index == bigBatchNr %}
                  <div class="col-md-8">
                      <div class="caseGrid-item big-item">
  
                      </div>
                  </div>
              {% else %}
                  <div class="col-md-4">
                      <div class="caseGrid-item">
  
                      </div>
                  </div>
              {% endif %}
          {% endfor %}            
      </div>
  {% endfor %}
  
  ```
  
  
  ---
  
  ### Answer by username_1 on 2018-02-27. Score: 1
  
  This is how I re-created [Businessweek category page](http://www.newsweek.com/business). It's not perfect, but you can start from there:
  
  ```html
  {% paginate craft.entries.section('news').relatedTo(category).limit(17) as pageInfo, paginatedEntries %}
  {% set firstTwo = paginatedEntries|slice(0,2) %}
  {% set secondThree = paginatedEntries|slice(3,3) %}
  {% set lastFour = paginatedEntries|slice(6,10) %}
  
  <div class="row sub-section-1">
      {# Batch of 2 columns #}
      {% for entry in firstTwo %}
          <div class="col-lg-6">
              <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
              <div class="summary">{{ entry.summary }}</div>
          </div>
      {% endfor %}
  </div>
  <div class="row sub-section-2">
      {# Batch of 3 columns #}
      {% for entry in secondThree %}
          <div class="col-lg-6">
              <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
              <div class="summary">{{ entry.summary }}</div>
          </div>
      {% endfor %}
  </div>
  <div class="row sub-section-3">
      {# Rest of entries #}
      {% for entry in lastFour %}
          <article class="col-lg-12">
              <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
              <div class="summary">{{ entry.summary }}</div>
          </article>
      {% endfor %}
  </div>
  
  ```
  
  
  ---
  
  ### Answer by username_2 on 2017-02-27. Score: 1
  
  I think a way to achieve this, is to use a loop.
  If the pattern repeats after the third row, you could use odd or even.
  
  there might be a better way,
  
  <https://mijingo.com/blog/where-am-i-in-the-twig-loop>
  
  UPDATE i tested it, it kinda works but unfortunately it skips the 3rd item like that, as well as there still needs to be a solution for changing the first row layout every second loop
  
  ```
  {% for entry in items|batch(3) %}
   <div class="row rowDivider">
     {% if loop.index is odd %}
       {% for batch in entry[0:2]   %}
         {% if loop.index == 1 %}
           <div class="col-md-4">{{batch}}</div>
         {% else %}
           <div class="col-md-8">{{batch}}</div>
         {% endif %}
       {% endfor %}
     {% else %}
       {% for batch in entry %}
           <div class="col-md-4">4 item">{{batch}}</div>
       {% endfor %}
     {% endif %}
  </div>
  {% endfor %}
  
  ```
  
  playground for testing :
  <http://twig.stapps.io/>
  
  json i used :
  
  ```
  { "items": ["1" , "2", "3", "4", "5" , "6", "7", "8","9" , "10", "11", "12" ] }
  
  ```
  
  > **Comments:**
  > **username_2**: for the second loop and its repeating 'cold-md-4' element u could use batch to keep your code more dry.  
  > **username_0**: This wouldn't work because it will throw in a "row" every time it re-loop to show an entry  
  > **username_2**: and if u would serve the content from a table and change for block to for row?  
  > **username_0**: I can't keep doing the `{% if loop.index == x %}` as I would have to keep editing the code everytime we add something. It just cant work like that. I figured out all I need is odd batches should add 2 entries and even batches should add 3 entries.  
  > **username_2**: i just realized its not very effective, if u wouldn't change the position of the columns in the third row, u could loop with odd and even. sorry you are right , thought its the right direction.  
  
  ---
  
  