Using modulo on forloop.index in Jekyll Liquid

Question

I'm trying to set up a loop to display posts on my index page so that they fit within the skeleton.css framework. The first post should occupy twelve columns, and be contained in it's own row. Every two posts thereafter should be wrapped in a separate row. I'm using the following:

{% elsif forloop.index | modulo: 2 == 0 %}

...in an attempt to create a row div around every two posts. This doesn't appear to be working, as on output, each individual post is wrapped in a row div.

<div class="posts">

    {% for post in site.posts %}
        {% if forloop.first == true %}

            <div class="row">
                <article class="twelve columns"></article>
            </div>

        {% elsif forloop.index | modulo:2 == 0 %}

            <div class="row">
                <article class="six columns"></article>
            </div>

        {% else %}

            <article class="six columns"></article>

        {% endif %}
    {% endfor %}

</div>

Answer 1

Your {% elsif forloop.index | modulo:2 == 0 %} condition is incorrect as pipes are not allowed in such a control structure. It finally resolves to {% elsif forloop.index %} which is always true.

You can do this :

<div class="posts">
  {% for post in site.posts %}
    {% assign remainder = forloop.index | modulo: 2 %}
    {% if forloop.first == true %}
      <div class="row">
        <article class="twelve columns"></article>
      </div>
    {% elsif remainder == 0 %}
      <div class="row">
        <article class="six columns"></article>
      {% if forloop.last %}
      </div>
      {% endif %}
    {% else %}
        <article class="six columns"></article>
      </div>
    {% endif %}
  {% endfor %}
</div>

Answer 2

Index 1: skip

Index 2: start two article wrap

Index 3: end two article wrap

Index 4: start two article wrap

Index 5: end two article wrap

.

.

.

<div class="posts">

    {% for post in site.posts %}
        {% if forloop.first == true %}

            <div class="row">
                <article class="twelve columns"></article>
            </div>

        {% elsif forloop.index | modulo:2 == 0 %}

            <div class="row">
                <article class="six columns"></article>

        {% else %}

                <article class="six columns"></article>
            </div>

        {% endif %}
    {% endfor %}

</div>

Although this will introduce a new problem. It may work for 3 articles or 5 articles, but not for 4 or 6 articles.

One needs to use a helper variable, to track the openness of the last row div:

{% assign opendiv = false %}

<div class="posts">

    {% for post in site.posts %}

        {% assign remainder = forloop.index | modulo:2 %}

        {% if forloop.first == true %}

            <div class="row">
                <article class="twelve columns"></article>
            </div>

        {% elsif forloop.last == true and opendiv == false %}

            <div class="row">
                 <article class="six columns"></article>
            </div>

        {% elsif remainder == 0 %}

            {% opendiv = true %}
            <div class="row">
                <article class="six columns"></article>

        {% elsif opendiv == true %}

            {% opendiv = false %}
                <article class="six columns"></article>
            </div>

        {% endif %}
    {% endfor %}

</div>