Foundation
-
FollowReplies
-
How to output a new row every n columns?
byBart Peperkamp Monday, December 02, 2013 at 6:30 AM EST
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?
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.
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.
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
@Samuel Kelemen
thats a great idea. I am in the process of revamping some of these so I am going to steal your idea ;)
Sound like you either need a cms or preprocessor