-
Replies
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