Pinterest Style Responsive Dynamic Grid System with Pure JavaScript – colm.js

Category: Javascript , Layout , Recommended | September 28, 2015
Author: zocky
Views Total: 2,283 views
Official Page: Go to website
Last Update: September 28, 2015
License: MIT


Pinterest Style Responsive Dynamic Grid System with Pure JavaScript – colm.js


colm.js is a lightweight & standalone JavaScript library that dynamically arrange a collection of elements into a responsive grid layout similar to Pinterest or Masonry.

How to use it:

Load the latest version of colm.js in your document.

<script src="build/colm.x.js"></script>

Create a column grid as follow. You can pass the options to the grid layout via HTML5 data-* attributes.

  • data-colm-width=”160″: the width of the items
  • data-colm-min-width=”140″: minimux width of the items
  • data-colm-align-columns=”stretch”: left, right, center, justify, space or stretch
  • data-colm-align-items=”stretch”: top, bottom, center, justify, space or stretch
  • data-colm-place=”column”: force child items into a particular column. Use negative numbers for counting from the right.
      Content 1
      Content 2
      Content 3

Advanced usage.

// Used to programmatically trigger layouting on the page. 
// This is automatically called on page load and resize.

// Add new children to a container. 
// Content can be a single element, an array or node list of elements or an HTML string.

You Might Be Interested In:

Leave a Reply