A rails helper to arrange content in columns.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
vendor/assets/stylesheets
.gitignore
.travis.yml
Gemfile
MIT-LICENSE
README.md
Rakefile
column_pack-1.0.0.gem
column_pack.gemspec

README.md

column_pack Build Status

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.

Example

17 images arranged into 5 columns.

example image

(150px wide images)

Installation

Add this line to your application's Gemfile:

gem 'column_pack'

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

//= require column_pack

Usage

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 %>

Styling the Columns

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;
}

Additional Options

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)