Split channel entries into 3 columns

Question

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.

Answer 1

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.

Answer 2

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