gird view not working in rails

I am really new to rails, i a teaching myself by creating web app, right now am building a pintrest like web app, everything is working nicely, but i want the pints to be in a grid sort of view for that i tried using masonry-rails Gem. But it doesn't seems to work. Here is a ScreenShot of what am getting right now.

My Index file

<link href="/assets/lposts.css.scss" rel="stylesheet">
<link href="/assets/pins.js.coffee" rel="javascript">
<div class="transitions-enabled" id="pins">
  <% @posts.each do |post| %>
    <div class="box panel panel-default">
      <%= link_to (image_tag post.picture.url), post %>
      <h2>
        <%= link_to post.title, post %>
      </h2>
      <p class="user">
        Submitted by
        UserName
      </p>
    </div>
  <% end %>
</div>

My css file

body {
    background: #E9E9E9;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 100;
}

nav {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
    .navbar-brand {
        a {
            color: #BD1E23;
            font-weight: bold;
            &:hover {
                text-decoration: none;
            }
        }
    }
}

#pins {
  margin: 0 auto;
  width: 100%;
  .box {
      margin: 10px;
      width: 350px;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
      border-radius: 7px;
      text-align: center;
      img {
        max-width: 100%;
        height: auto;
      }
      h2 {
        font-size: 22px;
        margin: 0;
        padding: 25px 10px;
        a {
                color: #474747;
        }
      }
      .user {
        font-size: 12px;
        border-top: 1px solid #EAEAEA;
            padding: 15px;
            margin: 0;
      }
    }
}

#edit_page {
    .current_image {
        img {
            display: block;
            margin: 20px 0;
        }
    }
}

#pin_show {
    .panel-heading {
        padding: 0;
    }
    .pin_image {
        img {
            max-width: 100%;
            width: 100%;
            display: block;
            margin: 0 auto;
        }
    }
    .panel-body {
        padding: 35px;
        h1 {
            margin: 0 0 10px 0;
        }
        .description {
            color: #868686;
            line-height: 1.75;
            margin: 0;
        }
    }
    .panel-footer {
        padding: 20px 35px;
        p {
            margin: 0;
        }
        .user {
            padding-top: 8px;
        }
    }
}

textarea {
    min-height: 250px;
}

** My js file**

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://ift.tt/jEIcxH

$ ->
  $('#pins').imagesLoaded ->
    $('#pins').masonry
      itemSelector: '.box'
      isFitWidth: true

In my application.scss

*= require 'masonry/transitions'

In my application.js

//= require masonry/jquery.masonry