0

I am trying to figure out how to split channel entries evenly into 3 columns.

The result should look as follows:

<div class="col-1-3">
    Entry 1
    Entry 2
    Entry 3
    Entry 4
</div>
<div class="col-1-3">
    Entry 5
    Entry 6
    Entry 7
    Entry 8
</div>
<div class="col-1-3">
    Entry 9
    Entry 10
</div>

I tried the following using modulus but it gave me 3 entries per column and keeps creating more columns.

{if count == 1 || count % 3 == 1}
<div class="col-1-3">
{/if}
{title}<br>
{if count == total_results || count % 3 == 0}
</div>
{/if}

I'm using EE3 so none of the existing plugins will work.

Any help is appreciated.

0

Did you try using only css? Like in this example https://www.w3schools.com/cssref/css3_pr_columns.asp It's maybe not what you need but css will "split" your content in X columns.

| improve this answer | |
  • I gave that a go & it works pretty good. Wish you could set the columns using percentages but I think I can make this work. Thanks for the tip! Would be nice to be able to figure out using Modulus as well for the future. – mediapimp Jul 13 '17 at 1:02
3

The modulus operator is your friend here. https://docs.expressionengine.com/latest/templates/conditionals.html#mathematic-operators

| improve this answer | |
  • I tried using modulus but didn't get the result I need. I know it's a user error but modulus is a bit confusing for me. I updated my original post with my code. – mediapimp Jul 12 '17 at 0:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.