Pinterest Hacks

Responsive Pin Widget Grid

The CSS

We are using a mobile-first approach, so define your grid wrapper .pinGridWrapper with a max-width of 237px and center it (237px is the width of the Pinterest pin widget at the time this was written):

.pinGridWrapper {
	text-align:center; 
    margin:auto; 
    max-width: 237px;
}

Since our smallest width will be 320px for iPhone 4 and below, we'll start with just 1 column. Setup a class for the grid called .pinGrid with column-count of 1 and a gap of 15px:

.pinGrid {
	-webkit-column-count: 1;
	-webkit-column-gap: 15px;
	-moz-column-count: 1;
	-moz-column-gap: 15px;
	column-count: 1;
	column-gap: 15px;
}

Next setup your .pin class, which will hold the pin widget code Pinterest provides. Use 237px again for the width and column-break-inside: avoid; so that the contents of the .pin div don't get chopped:

.pin {
	display: inline-block;
	margin: 0 0 15px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	width: 237px;
	max-width: 100%;
}

Now add some responsive juice using media queries! For this example we are going up to 4 columns of pins, increasing the column count and the wrapper size (in multiples of 237px) as we go:

@media (min-width: 534px) {
.pinGridWrapper {
	max-width: 534px;
}
.pinGrid {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}
}
 @media (min-width: 801px) {
.pinGridWrapper {
	max-width: 801px;
}
.pinGrid {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}
}
 @media (min-width: 1068px) {
.pinGridWrapper {
	max-width: 1068px;
}
.pinGrid {
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
}
}

The HTML

Update the urls to your pins' urls, and repeat the .pin div as necessary:

<div class="pinGridWrapper">
  <div class="pinGrid">
    <div class="pin"><a data-pin-do="embedPin" href="http://www.pinterest.com/pin/542824561308268152/"></a></div>
    <div class="pin"><a data-pin-do="embedPin" href="http://www.pinterest.com/pin/542824561311603038/"></a></div>
    .....
  </div>
</div>
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
  

There you have it. Enjoy!