Menu icon Foundation
How to output a new row every n columns?

It's possible that this is not entirely a foundation question, but i can't find a proper solution after searching the web. I am building a Wordpress template for a webshop (powered by Woocommerce). Ofcourse i want to build it using Foundation :-) The problem is that there are a lot of products and i want to spit out a new row every nth products.. Now it's like this:

<div class="row">
    <div class="large-9 columns">
    products go here.. 
    </div>
</div>
            

         

I'd like it to be like this:

<div class="row">
    <div class="large-9 columns">
    <!-- Products -->
    <div class="row">
        <div class="large-6 columns">
        product #1
        </div>
        <div class="large-6 columns">
        product #2
        </div>
    </div>
    <!-- etc. etc. -->
    <!-- end Products -->
    </div>
</div>
            

         

Can anybody point me in the right direction?

rowcolumn

It's possible that this is not entirely a foundation question, but i can't find a proper solution after searching the web. I am building a Wordpress template for a webshop (powered by Woocommerce). Ofcourse i want to build it using Foundation :-) The problem is that there are a lot of products and i want to spit out a new row every nth products.. Now it's like this:

<div class="row">
    <div class="large-9 columns">
    products go here.. 
    </div>
</div>
            

         

I'd like it to be like this:

<div class="row">
    <div class="large-9 columns">
    <!-- Products -->
    <div class="row">
        <div class="large-6 columns">
        product #1
        </div>
        <div class="large-6 columns">
        product #2
        </div>
    </div>
    <!-- etc. etc. -->
    <!-- end Products -->
    </div>
</div>
            

         

Can anybody point me in the right direction?

Samuel Kelemen over 5 years ago

James, awesome tutorials... This will be quite helpful for me

James Stone over 5 years ago

@Samuel Kelemen

thats a great idea. I am in the process of revamping some of these so I am going to steal your idea ;)

Samuel Kelemen over 5 years ago

@james Stone.
Nice video.

You should also include equalizer. Using equalizer will allow the panels to take the height of the largest panel.
http://foundation.zurb.com/docs/components/equalizer.html

James Stone over 5 years ago

I created a video on youtube to explain exactly this issue. I use JavaScript but you can easily implement the same idea in a variety of different languages. If you have any questions, leave a comment for me on the video.

https://www.youtube.com/watch?v=UjN_aX84Qco

Karl Ward over 5 years ago

As mentioned by @Esa, the block-grid is your best friend your column layouts with x amount of items to be stacked into order.

Esa Rantanen over 5 years ago

Hi Bart,

why don't you just spit out the products into a block-grid?

http://foundation.zurb.com/docs/components/block_grid.html

Samuel Kelemen over 5 years ago

Sound like you either need a cms or preprocessor