Search code examples
htmlcsszurb-foundationgrid-layout

Foundation column layout not behaving as expected

I have a bit of code:

<div class="large-12 columns">
  <div class="row">
<% @just_products.each do |i| %>
  <% just_names = i['Name'] %>
  <% just_prices = i['UnitPrice'] %>
  <% just_descriptions = i['Description'] %>
    <div class="large-3 columns panel radius"><h2><%=h just_names %></h2><br><h3><%=h just_prices %></h3><br>
    <p><%=h just_descriptions %></p></div>
  <% end %>
</div>

The output isn't what I thought it would be. I'm going for 4 product blocks in each row and as you can see below some of them are very misaligned. Foundation error

Trying to figure out why it goes 4 x 4 x 2 x 4 x 1 x 4 x 4 x 2 instead of 4 x 4 x 4 x 4 x 4 x 4 x 1

Solution

  • You need to set a fixed height for your product columns otherwise the floated element will catch on another taller element or clear it all together. You may want to checkout either http://cssdeck.com/labs/css-only-pinterest-style-columns-layout or masonry

    Please let me know if this helps!