How to add Masonry to WordPress theme

This is a short tutorial about how to use masonry in your WordPress theme. So, I will not be describing what it is and how it works. If you are curious, you can read about it here http://masonry.desandro.com

WordPress core already has masonry included. So we do not need to download and include it from our theme files. We just need to include it just like we do jQuery.

wp_enqueue_script( 'masonry');

So copy and paste the above line to your theme’s functions.php file. I am too lazy. So don’t complain about writing it short :p

Now find a JS file that you have already included in your theme and paste the following lines into it.

jQuery( document ).ready( function( $ ) {
$('.grid').masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  // use element for option
  columnWidth: '.col-md-3',
  percentPosition: true
})
} );

Here my parent element class was “grid” and the child elements (the bricks) class is “grid-item”. I was using Bootstrap, so for the width property, I am using “col-md-3”.
And you are done and have fun!

//hope this makes sense; if not feel free to comment below and I will write this in a decent way -_-