I am making a menu page on a website and am going to use repeatable regions and each new menu category and the menu items relating to that menu category will be starting on a new row like the following non couchcms code

Code: Select all
<div class="row" id="deals">
            <div class="col-md-12 col-lg-12">
                <div class="menu-wrap">
                    <div class="heading-menu text-center ftco-animate">
                        <h3>Deals</h3>
                    </div>
                    <div class="menus d-flex ftco-animate">
                        <div class="menu-img img" style="background-image:url(images/breakfast-1.jpg)"></div>
                        <div class="text">
                            <div class="d-flex">
                                <div class="one-half">
                                    <h3>Saag &amp; 2 Makki Di Roti</h3>
                                </div>
                                <div class="one-forth">
                                    <span class="price">£8.50</span>
                                </div>
                            </div>
                            <p><span>Meat</span>, <span>Potatoes</span>, <span>Rice</span>, <span>Tomatoes</span></p>
                        </div>
                    </div>
               </div>
           </div>
</div>

<div class="row" id="snacks">
            <div class="col-md-12 col-lg-12">
                <div class="menu-wrap">
                    <div class="heading-menu text-center ftco-animate">
                        <h3>Snacks</h3>
                    </div>
                    <div class="menus d-flex ftco-animate">
                        <div class="menu-img img" style="background-image:url(images/breakfast-1.jpg)"></div>
                        <div class="text">
                            <div class="d-flex">
                                <div class="one-half">
                                    <h3>Saag &amp; 2 Makki Di Roti</h3>
                                </div>
                                <div class="one-forth">
                                    <span class="price">£8.50</span>
                                </div>
                            </div>
                            <p><span>Meat</span>, <span>Potatoes</span>, <span>Rice</span>, <span>Tomatoes</span></p>
                        </div>
                    </div>
               </div>
           </div>
</div>


I could use the zebra counting method but is tricky to use as there is a different number of menu items in each category so if i put 8 in, the row won't close until after the 8th item but if there is not 8 added, the row won't close so is there a way to close the row after adding the last item in the repeatable region on the cms side please?

Hope that makes sense

UPDATE: Sorry I altered the code slightly and done it a different way and works