gird view not working in rails - ruby-on-rails

Question

I am really new to rails and I'm teaching myself by creating a web app, right now I'm building a pintrest like web app.
Everything is working nicely, but I want the pins to be in a grid sort of view. For that I tried using masonry-rails Gem.
But it doesn't seems to work.
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://coffeescript.org/
$ ->
$('#pins').imagesLoaded ->
$('#pins').masonry
itemSelector: '.box'
isFitWidth: true
In my application.scss
*= require 'masonry/transitions'
In my application.js
//= require masonry/jquery.masonry

Answer 1

The way you include you js assets is wrong.
Please include the js file using
<%= javascript_include_tag 'pins' %>
and place the pins.js.coffee file in precompile assests path
Rails.application.config.assets.precompile += %w(articles.js)
Either you can place your assets in application.js
//= require pins
Hope this is going to work for you.