Question

I want to build a product page where there are multi columns. The problem I am running into using the following is that if I have an odd number of products then the column spills over to the next column. I read that there is a bug with this using CSS 3.

My question is, how can I build this grid-like product list in rails? I tried using table, but it just displays it in one column. Thanks

div.four-column {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;

  -moz-column-width: 10em;
  -webkit-column-width: 10em;
  column-width: 10em;

  width: 910px;
}


<ul>
  <% @products.each do |product| %>
    <li class="box">
      <%= link_to product.name, product_path(:id) %></br>
      <%= product.price %>
    </li>
  <% end %>
</ul>

Answer 1

my suggestion would be to try a css framework for this kind of layout

Grid960

or

Twitter bootstrap

You can do what you want very easily.

Give it a try and tell me what you think.

Btw in your example, you show the code of your CSS for div with class four-column but below your erb seems to miss this div with this class definition? all i can see is a div with class=”box” !