Break and resume repeat after nth div

I have a repeat on a row which shows a column (containing a card) per item from a database query. Working perfectly.

I am wanting to stop after the 6th column, end the row, insert a <div> and then resume the row/columns again until the next 6th column.

Here’s what I have at the moment (simplified) -

<div class="row" is="dmx-repeat">
    <div class="col">
        <div class="card"> 1 </div>
    </div>
    <div class="col">
        <div class="card"> 2 </div>
    </div>
    <div class="col">
        <div class="card"> 3 </div>
    </div>
    <div class="col">
        <div class="card"> 4 </div>
    </div>
    <div class="col">
        <div class="card"> 5 </div>
    </div>
    <div class="col">
        <div class="card"> 6 </div>
    </div>
    <div class="col">
        <div class="card"> 7 </div>
    </div>
</div>

And here’s what I’m trying to achieve -

<div class="row" is="dmx-repeat">
    <div class="col">
        <div class="card"> 1 </div>
    </div>
    <div class="col">
        <div class="card"> 2 </div>
    </div>
    <div class="col">
        <div class="card"> 3 </div>
    </div>
    <div class="col">
        <div class="card"> 4 </div>
    </div>
    <div class="col">
        <div class="card"> 5 </div>
    </div>
    <div class="col">
        <div class="card"> 6 </div>
    </div>
</div>

<div> SECTION OR LINE BREAK </div>

<div class="row" is="dmx-repeat">
    <div class="col">
        <div class="card"> 7 </div>
    </div>

etc....

Is this possible?

Community Page
Last updated: