Question

I would like to display items for an e-commerce page in Rails, and instead of a standard vertical list table, I would like to the title and images from left to right, about 4 across, then continue the list on as added: ie.

Entry 1 Entry 2 Entry 3 Entry 4

Entry 5 Entry 6 ….

My first guess is to make a scope for each column- where I could skip entries by a factor of 4, but I would like to know if there is a better solution using CSS or any other trick?

Answer 1

There’s a method on Enumerable which is called each_slice. Basically what it does is give you slices of an array.

(1..10).each_slice(3) {|a| p a}
# outputs below
[1, 2, 3]
[4, 5, 6]
[7, 8, 9]
[10]

Another option using CSS would be to have a container of fixed width, say 400px, and then have each of the elements have width: 100px and float: left, so they’ll line up one after another.