{"id":14969796,"url":"https://github.com/justintanner/column_pack","last_synced_at":"2026-03-02T04:31:29.036Z","repository":{"id":23831671,"uuid":"27208804","full_name":"justintanner/column_pack","owner":"justintanner","description":"A rails helper to arrange content in columns.","archived":false,"fork":false,"pushed_at":"2017-08-10T03:24:42.000Z","size":73,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-11T19:48:11.865Z","etag":null,"topics":["rails","ruby"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/justintanner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-27T04:22:24.000Z","updated_at":"2017-08-09T22:27:21.000Z","dependencies_parsed_at":"2022-08-20T01:52:14.184Z","dependency_job_id":null,"html_url":"https://github.com/justintanner/column_pack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/justintanner/column_pack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justintanner%2Fcolumn_pack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justintanner%2Fcolumn_pack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justintanner%2Fcolumn_pack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justintanner%2Fcolumn_pack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justintanner","download_url":"https://codeload.github.com/justintanner/column_pack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justintanner%2Fcolumn_pack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29992302,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T01:47:34.672Z","status":"online","status_checked_at":"2026-03-02T02:00:07.342Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["rails","ruby"],"created_at":"2024-09-24T13:42:23.897Z","updated_at":"2026-03-02T04:31:29.018Z","avatar_url":"https://github.com/justintanner.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# column_pack [![Build Status](https://travis-ci.org/justintanner/column_pack.svg?branch=master)](https://travis-ci.org/justintanner/column_pack)\n\nArranges content into a fixed number of columns.\n\nUseful in creating [pinterest](http://www.pinterest.com) style image murals.\n\nIf you are looking for a JavaScript solution try: [packery][1], [masonry][2] or [isotope][3].\n\n## Example\n\n**17 images** arranged into **5 columns**.\n\n![example image](http://i.imgur.com/deSRVox.jpg)\n\n(150px wide images)\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'column_pack'\n```\n\nAdd the following line to `app/assets/stylesheets/application.css`\n\n```\n//= require column_pack\n```\n\n## Usage\n\nPack some text into three columns:\n\n```erb\n\u003c%= pack_in_columns(3) do %\u003e\n\n  \u003c%= pack_element 100, 'A' %\u003e\n  \u003c%= pack_element 300, 'B' %\u003e\n  \u003c%= pack_element 50,  'C' %\u003e\n  \u003c%= pack_element 350, 'D' %\u003e\n  \u003c%= pack_element 200, 'E' %\u003e\n  \u003c%= pack_element 200, 'F' %\u003e\n\n\u003c%= end %\u003e\n```\n\nPack some images into five columns:\n\n```erb\n\u003c%= pack_in_columns(5) do %\u003e\n  \u003c% @images.each do |image| %\u003e\n\n   \u003c% pack_element(image.height) do %\u003e\n     \u003c%= image_tag image.url %\u003e\n   \u003c% end %\u003e\n\n  \u003c% end %\u003e\n\u003c% end %\u003e\n```\n\n## Styling the Columns\n\nThe size of the container and spacing between columns **requires css styling**.\n\nThe following example creates **three 300px** columns with **10px** spacing:\n\n```css\n.column-pack-wrap {\n  width: 930px;\n}\n\n.column-pack-col {\n  width: 300px;\n  margin: 0 5px 0 5px;\n}\n\n.column-pack-element {\n  margin: 0 0 10px 0;\n}\n```\n\n## Additional Options\n\n**Signature**\n\n```ruby\npack_in_columns(total_cols, options = {})\n```\n\n**Options**\n\n* `:algorithm` - specify a different bin packing algorithm (default is `:best_fit_decreasing`)\n* `:shuffle_in_cols` - after packing columns, shuffle the elements in each column (default is\n  `true`)\n\n[1]: https://github.com/metafizzy/packery\n[2]: https://github.com/desandro/masonry\n[3]: https://github.com/metafizzy/isotope\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustintanner%2Fcolumn_pack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustintanner%2Fcolumn_pack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustintanner%2Fcolumn_pack/lists"}