Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A jquery plugin that allows you to easily create Pinterest style grid layouts.
Branch: master
Failed to load latest commit information. updated readme
jquery.pingrid.js added debounce to smartresize and imagesloaded to append

REQUIREMENTS - Be sure to include these files above jquery.pingrid :


PinGrid is a simple Pinterest Inspired jQuery plugin for rendering html dom elements in a html dom container elements in the vertically staggered Pinterest style.

First you need a container element that has a width, and position:[relative|absolute].

  #container {
    border:1px solid #000;

<div id="container"></div>

Next, you will need the elements that will be placed in your container. If the elements are pre-rendered in your container, you can simply set:

 var boxes = $(".<element-class>",".<container-class>")

In the example below, we generate random box elements in a for loop for demo purposes.

//generate random boxes
var boxes = [];
for(var i=0; i<50; i++) {
  var newBox = $("<div></div>");
    border: "1px solid #ccc",
    height: (Math.round((Math.random()*100)) + 100)+"px" //random height

Once things are in place, you can initialize pingrid as follows

// initialize pingrid
  colPadLeft: 4,
  colPadRight: 4,
  boxMarginTop: 8

Here is a list of initialization parameters that can be included:

  • numCols: //The number of columns you want your grid to have, default:4
  • colPadLeft: //Pixel padding to the left of each column, default:4px
  • colPadRight: //Pixel padding to the right of each column, default:4px
  • boxMarginTop: //Top pixel padding for each box elemenet in the container, default:8px

Now, simply add your first set of elements to the grid. NOTE: The elements you are adding MUST be in an array.

//add elements to the grid
$("#container").pinGrid("append", {collection:boxes});

 You can continue to add elements to the pingrid by making subsequent calls to append, just as you did the first time.

See it in Action!

Something went wrong with that request. Please try again.