Responsive Packery Grid With Fluid Columns

index.html

<h1>Responsive Packery Grid</h2>
<hr>
<div class="packery js-packery" data-packery-options='{ "gutter": ".gutter-sizer", "itemSelector": ".item", "columnWidth": ".grid-sizer"}'>
  <div class="gutter-sizer"></div>
  <div class="grid-sizer"> </div>
  <div class="item">
    <div class="thing"></div>
  </div>
  <div class="item">
    <div class="thing small"></div>
  </div>
  <div class="item">
    <div class="thing"></div>
  </div>
  <div class="item">
    <div class="thing extra-small"></div>
  </div>
  <div class="item">
    <div class="thing tall"></div>
  </div>
  <div class="item">
    <div class="thing"></div>
  </div>
  <div class="item">
    <div class="thing"></div>
  </div>
  <div class="item">
    <div class="thing extra-tall"></div>
  </div>
  <div class="item">
    <div class="thing medium"></div>
  </div>
  <div class="item">
    <div class="thing"></div>
  </div>
  <div class="item">
    <div class="thing medium"></div>
  </div>
  <div class="item">
    <div class="thing"></div>
  </div>
  <div class="item">
    <div class="thing"></div>
  </div>
  <div class="item">
    <div class="thing"></div>
  </div>
  <div class="item">
    <div class="thing extra-small"></div>
  </div>
  <div class="item">
    <div class="thing"></div>
  </div>
  <div class="item">
    <div class="thing "></div>
  </div>
  <div class="item">
    <div class="thing tall"></div>
  </div>
  <div class="item">
    <div class="thing"></div>
  </div>
</div>

Responsive Packery Grid With Fluid Columns.markdown

Responsive Packery Grid With Fluid Columns

Fixed The Grid From: nor159

A Pen by Evan Wieland on CodePen.

License.

script.js

$(document).ready(function () {
  var $container = $('.packery')
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>

style.css

@import "compass/css3"

$sinbad: #96d6c6

* 
    margin: 0
    padding: 0
    border: 0
    -webkit-box-sizing: border-box
    -moz-box-sizing: border-box
    box-sizing: border-box

body 
    background-image: url(http://subtlepatterns.com/patterns/geometry.png)

h1
    font-family: 'Lato', sans-serif
    font-weight: 300
    font-size: 4em
    color: #777
    text-align: center
  
.item 
    float: left
  
.thing 
    height: 150px
    width: 100%
    background: $sinbad
    +box-shadow(0 0 6px 2px rgba(80, 80, 80, 0.2))


//.packery
//    animation: fadein 4s
//    -moz-animation: fadein 4s
//    -webkit-animation: fadein 4s
//    -o-animation: fadein 4s
//
//@keyframes fadein 
//    from 
//        opacity: 0
//
//    to 
//        opacity: 1
//
//@-moz-keyframes fadein 
//    from 
//        opacity: 0
//
//    to 
//        opacity: 1
//
//@-webkit-keyframes fadein 
//    from 
//        opacity: 0
//
//    to 
//        opacity: 1
//
//@-o-keyframes fadein 
//    from 
//        opacity: 0
//
//    to 
//        opacity: 1
    
.extra-tall
    height: 400px
    background: #DB6E63 
 
.tall
    height: 300px
    background: #A3626D 
  
.medium
    height: 200px
    background: #50A365 
  
.small
    height: 100px
    background: #6290A3 

.extra-small
    height: 50px
    background: #A874D5  

@media screen and(max-width: 400px) 
    .grid-sizer 
        width: calc(4/14*100%)

    .item 
        width: calc(14/14*100%)

    .gutter-sizer 
        width: calc(1/14*100%)

    .packery 
        margin: calc(1.0/14*100%) calc(1.0/14*100%) calc(1.0/14*100%) calc(1.0/14*100%)


@media screen and(min-width: 400px) 
    .grid-sizer 
        width: calc(4/19*100%)

    .item 
        width: calc(9/19*100%)

    .gutter-sizer 
        width: calc(1/19*100%)

    .packery 
        margin: calc(1.0/19*100%) calc(1.0/19*100%) calc(1.0/19*100%) calc(1.0/19*100%)


@media screen and(min-width: 800px) 
    .grid-sizer 
        width: calc(4/29*100%)

    .item 
        width: calc(9/29*100%)

    .gutter-sizer 
        width: calc(1/29*100%)

    .packery 
        margin: calc(1.0/29*100%) calc(1.0/29*100%) calc(1.0/29*100%) calc(1.0/29*100%)


@media screen and(min-width: 1200px) 
    .grid-sizer 
        width: calc(4/39*100%)

    .item 
        width: calc(9/39*100%)

    .gutter-sizer 
        width: calc(1/39*100%)

    .packery 
        margin: calc(1.0/39*100%) calc(1.0/39*100%) calc(1.0/39*100% calc(1.0/39*100%))


@media screen and(min-width: 1600px) 
    .grid-sizer 
        width: calc(4/49*100%)

    .item 
        width: calc(9/49*100%)

    .gutter-sizer 
        width: calc(1/49*100%)

    .packery 
        margin: calc(1.0/49*100%) calc(1.0/49*100%) calc(1.0/49*100%) calc(1.0/49*100%)


.packery:after 
    content: ' '
    display: block
    clear: both

styles

<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />