Arranges content into a fixed number of columns.

Useful in creating pinterest style image murals.

If you are looking for a JavaScript solution try: packery, masonry or isotope.

17 images arranged into 5 columns.

(150px wide images)

Add this line to your application's Gemfile:

gem 'column_pack'

Add the following line to app/assets/stylesheets/application.css

//= require column_pack

Pack some text into three columns:

<%= pack_in_columns(3) do %>

  <%= pack_element 100, 'A' %>
  <%= pack_element 300, 'B' %>
  <%= pack_element 50,  'C' %>
  <%= pack_element 350, 'D' %>
  <%= pack_element 200, 'E' %>
  <%= pack_element 200, 'F' %>

<%= end %>

Pack some images into five columns:

<%= pack_in_columns(5) do %>
  <% @images.each do |image| %>

   <% pack_element(image.height) do %>
     <%= image_tag image.url %>
   <% end %>

  <% end %>
<% end %>

The size of the container and spacing between columns requires css styling.

The following example creates three 300px columns with 10px spacing:

.column-pack-wrap {
  width: 930px;
}

.column-pack-col {
  width: 300px;
  margin: 0 5px 0 5px;
}

.column-pack-element {
  margin: 0 0 10px 0;
}

Signature

pack_in_columns(total_cols, options = {})

Options

• :algorithm - specify a different bin packing algorithm (default is :best_fit_decreasing)
• :shuffle_in_cols - after packing columns, shuffle the elements in each column (default is true)