Question

I’m pulling pictures via the Facebook API and that I’m trying to split the pictures into three columns, using twitter bootstrap and the rails koala gem.

The pictures separate into columns ok, but the spacing within the columns is very lumpy. Sometimes there will be a huge gap within a column between pictures. It seems to be because there is a much longer picture in one of the other columns.

Is there a way to make sure that pictures show up more fluidly?

Here is my code. Thank you

<div class = "row-fluid">
<div class ="span16">
<% @album = @graph.get_connections("me", "albums") %>
<% @album.each do |result| %>
  <% @photos = @graph.get_connections("#{result['id']}", "photos") %>
    <% @photos.each do |result| %>
    <div class ="span3">
        <img src="<%= result["source"] %>">
    </div>
    <% end %>
<% end %>
</div>
</div>

Answer 1

If your grid system is 16 columns (span16) and you want to display images into span3 divs you have to split them into 5elements per row, cause span3*5=span15 so your code should have a loop that count elements and each 5 close the row and opens another.