How to display a submenu from the base using twig, with a division into 3 blocks?

Question

HTML

Good afternoon everyone! The task is to display the submenu from the database using twig, dividing it into 3 divs. That is, the submenu should have the following structure:

<div class="submenu">
    <div>
        <a href="menu.php?id=1">Подкатегория 1</a>
        <a href="menu.php?id=2">Подкатегория 2</a>
        <a href="menu.php?id=3">Подкатегория 3</a>
    </div>
    <div>
        <a href="menu.php?id=4">Подкатегория 4</a>
        <a href="menu.php?id=5">Подкатегория 5</a>
        <a href="menu.php?id=6">Подкатегория 6</a>
    </div>
    <div>
        <a href="menu.php?id=7">Подкатегория 7</a>
        <a href="menu.php?id=8">Подкатегория 8</a>
        <a href="menu.php?id=9">Подкатегория 9</a>
    </div>
</div>

Each inner div is pushed to the left, thus forming 3 columns. I wrote a code that displays at a glance everything the way I need it:

{% set counter = 0 %}
{% for menu_item in menu %}
    {% if counter == 0 %}
        <div>
    {% endif %}
    <a href="/menu.php?id={{ menu_item.id }}">{{ menu_item.name }}</a>
    {% set counter = counter + 1 %}
    {% if counter == 3 %}
        {% set counter = 0 %}
        </div>
    {% endif %}
{% endfor %}
{% if counter != 0 %}
    </div>
{% endif %}

When adding another submenu, a fourth div is created and the last link is added to it, although outwardly it looks like the link was added to the first one. Here's what it looks like in practice: image . In this case, the last sub-categories "New" and "New 1" are in the 4th div, and it should be that "New" is in the first, and "New 1" in the second. It turns out that I need something like the following algorithm: in a cycle, open the first div - display the 1st link in it, close it, open the second div - display the 2nd link in it, close it, open the third - 3rd link. But we should display the 4th link again in the first div, the 5th - in the second, and so on. That is, so that the links are eventually added line by line, and not 3 per column. I can't figure out how to implement this.

Answer 1

<div>
{% for menu_item in menu %}
    {% if loop.index0 != 0 and loop.index0%3  == 0%}
        </div>
        <div>
    {% endif %}
    <a href="/menu.php?id={{ menu_item.id }}">{{ menu_item.name }}</a>
{% endfor %}
</div>

More or less like this