Although I thought the setup was straightforward, it seems like I am missing something...
Here is the HTML structure with a simple fixed-width 2-column layout:
<div class="container_12">
<div class="grid_masonry"> ... </div>
<div class="grid_masonry"> ... </div>
<div class="grid_masonry"> ... </div>
...
</div>
The masonry JS and jQuery are included in the <head>:
<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.12.0.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/masonry.pkgd.min.js"></script>
The scripts are loading correctly.
To trigger the masonry effect, the following code snippet is used:
<div class="container_12" data-masonry='{ "itemSelector": ".grid_masonry" }'>
Attempting to trigger it through jQuery (code provided below) resulted in no action or visible effect.
$('.container_12').masonry({
itemSelector: '.grid_masonry'
});
Here is the CSS for the grid elements:
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
...
.grid_masonry {
margin-bottom: 32px;
float: left;
width: 380px;
}
.grid_masonry:nth-child(odd) {
/* gutter */
margin-right: 160px;
}
If anyone can identify the issue and provide a solution, it would be greatly appreciated...